这是一款效果非常炫酷的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画廊,使得这个效果可以兼容以前版本的浏览器。