位置: 编程技术 - 正文
jQuery+CSS3实现3D立方体旋转效果(jquery教程w3c)
编辑：rootadmin推荐整理分享jQuery+CSS3实现3D立方体旋转效果(jquery教程w3c)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css3实现3d效果教程,css3实现3d效果教程,jquery 3d,jquery 3d全景,w3c jquery,w3cschool jquery,w3c jquery,jquery 3d全景,内容如对您有帮助，希望把文章链接给更多的朋友！
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：
切换图片过程中，图片进行旋转：
HTML结构3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。
CSS样式为了制作3D透视效果，需要在#css3dimageslider元素上设置perspective 透视属性，并在它里面的无序列表元素上设置transform-style: preserve-3d;，由于IE浏览器不支持这个属性，所以在IE浏览器中是看不到效果的。接下来通过:nth-child选择器分别选择每一个列表项，并通过translateZ和rotateY属性对它们进行3D转换，形成立方体效果。
JavaScript
最后在jQuery代码中，在点击按钮的时候相应的#css3dimageslider ul元素的rotateY属性，是器旋转，并为其添加一个.active class。
标签: jquery教程w3c
本文链接地址:https://www.jiuchutong.com/biancheng/370497.html 转载请保留说明！