位置: 编程技术 - 正文
推荐整理分享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 转载请保留说明!下一篇:jquery事件的ready()方法使用详解(jquery的事件处理)
友情链接: 武汉网站建设