jQuery和CSS3炫酷3D旋转画廊特效插件-灵象搜搜资源网

jQuery和CSS3炫酷3D旋转画廊特效插件

发布2020-11-07 浏览816次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

这是一款效果非常炫酷的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度来定位下一张或上一张图片。