这是一款效果非常炫酷的jQuery和CSS3 3D旋转画廊特效插件。第一个DEMO是一个简单的例子,使用CSS3来制作3d旋转效果,然后用js来控制前后导航按钮。第二个DEMO是第一个DEMO的升级版,它增加了图片标题、查看图片、键盘控制等其它功能。

插件中精美的插画来自于花瓣

HTML结构

这个3D画廊的HTML结构非常简单,DEMO1使用一个div作为wrapper,里面是一个figure元素,figure里面是图片。DEMO2的每张图片都使用一个单独的figure元素。

<div id="gallery">
    <figure id="spinner">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="4.jpg" alt="">
        <img src="5.jpg" alt="">
        <img src="6.jpg" alt="">
        <img src="7.jpg" alt="">
        <img src="8.jpg" alt="">
    </figure>
</div>
                

CSS样式

CSS样式也不复杂:图片和 figure Z轴的 origin 被向屏幕里面的方向旋转500px,并为 figure 提供一个值为1秒的 transition 。图片设置为40%的宽度,并离左边30%的距离,以使它们位于 figure 的中间位置。这样设置可以使3D画廊具有非常好的响应式效果。

body { background: #100000; font-size: 1.5rem; }
div#gallery { perspective: 1200px; }
figure#spinner { transform-style: preserve-3d; min-height: 122px; transform-origin: 50% 50% -500px; transition: 1s; }
figure#spinner img { width: 40%; position: absolute; left: 30%; transform-origin-z: 50% 50% -500px; outline: 1px solid transparent; }
                

figure 元素设置 min-height 和给图片设置 outline 是有原因的。这是另一个问题,将在以后的文章中解释它。当 min-height 属性传递给图片时,确保了它不会发生溢出的情况。

图片通过 nth-child 选择器绕中心轴均匀的分布:

figure#spinner img:nth-child(1) { transform: rotateY(0deg); }
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5) { transform: rotateY(-180deg); }
figure#spinner img:nth-child(6) { transform: rotateY(-225deg); }
figure#spinner img:nth-child(7) { transform: rotateY(-270deg); }
figure#spinner img:nth-child(8) { transform: rotateY(-315deg); }
                

通过上面的设置,你已经做好了一个具有响应式的3D图片画廊效果:当你缩小浏览器屏幕时,图片相应的变小,图片间的间距变大了。

在CSS代码中,我们没有使用各浏览器厂商的前缀,但是使用了 Lea Verou 的prefix-free来使效果可以在各个浏览器上显示。还有,我们在javascript中控制3D画廊旋转的代码中使用了浏览器前缀。

JAVASCRIPT

最后,我们要为3D画廊提供两个前后导航控制箭头,它们使用a元素来制作。

<a href="#" style="float: left" onclick="galleryspin('-')">◀</a>
<a href="#" style="float: right" onclick="galleryspin('')">▶</a>
                

如上所示,左边的导航箭头带有一个符号作为galleryspin的变量。

var angle = 0;
function galleryspin(sign) {
    spinner = document.querySelector("#spinner");
    if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
    spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}
                

上面的函数查看参数(负号)是否存在,然后为画廊相应的添加或删除45度来定位下一张或上一张图片。

高级3D画廊

以上是简单版的3D画廊的所有功能和代码,DEMO2是一个高级版的3D画廊,它在DEMO1的基础上增加了一些功能:

  • 每一张图片都使用单独的 figure 元素来包装,并各自带有标题(鼠标滑过图片时可见到)。
  • 图片的分布完全使用javascript来制作,这使得可以处理任意数量的图片。
  • 图片可以点击放大查看。
  • 可以使用键盘控制:Z键可以放大或缩小图片,C键可以显示或隐藏图片的标题。

浏览器兼容

  • 在桌面版和移动设备的Safari浏览器中,会替换3D画廊的 transform-origin-z 坐标,使其向前推进。
  • IE10因为不支持transform-style,3D画廊显示效果会有错误。
  • 当3d画廊的图片数量增加时,画廊的半径会随之增加。
  • 在高级版中我们将CSS 3D画廊转换为jQuery版本的3D画廊,使得这个效果可以兼容以前版本的浏览器。