jQuery+CSS3实现3D立方体旋转效果

本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果，先看一看效果图：

切换图片过程中，图片进行旋转：

HTML结构
3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。

<section> <div id="css3dimageslider" class="transparency"> <ul><li> <img src="img/css3dimg1.jpg"> </li><li> <img src="img/css3dimg2.jpg"> </li><li> <img src="img/css3dimg3.jpg"> </li><li> <img src="img/css3dimg4.jpg"> </li> </ul> </div> <ul id="css3dimagePager"> <li class="active">Image 1</li> <li>Image 2</li> <li>Image 3</li> <li>Image 4</li> </ul> <p id="css3dtransparency" class="active">点击上面的按钮切换图片</p></section>

CSS样式
为了制作3D透视效果，需要在#css3dimageslider元素上设置perspective 透视属性，并在它里面的无序列表元素上设置transform-style: preserve-3d;，由于IE浏览器不支持这个属性，所以在IE浏览器中是看不到效果的。接下来通过:nth-child选择器分别选择每一个列表项，并通过translateZ和rotateY属性对它们进行3D转换，形成立方体效果。

 #css3dimagePager, #css3dtransparency { text-align: center; position: relative; z-index: 11; padding: 0 0 10px; margin: 0;}#css3dimagePager li { padding-right: 2em; display: inline-block; cursor: pointer;}#css3dimagePager li.active, #css3dtransparency.active { font-weight: bold;}#css3dimageslider { -webkit-perspective: 800; -moz-perspective: 800px; -ms-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 100px; -moz-perspective-origin: 50% 100px; -ms-perspective-origin: 50% 100px; perspective-origin: 50% 100px; margin: 100px auto 20px auto; width: 450px; height: 400px;}#css3dimageslider ul { position: relative; margin: 0 auto; height: 281px; width: 450px; list-style: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 100px 0; -moz-transform-origin: 50% 100px 0; -ms-transform-origin: 50% 100px 0; transform-origin: 50% 100px 0; -webkit-transition: all 1.0s ease-in-out; -moz-transition: all 1.0s ease-in-out; -ms-transition: all 1.0s ease-in-out; transition: all 1.0s ease-in-out;}#css3dimageslider ul li { position: absolute; height: 281px; width: 450px; padding: 0px;}#css3dimageslider ul li:nth-child（1） { -webkit-transform: translateZ（225px）; -moz-transform: translateZ（225px）; -ms-transform: translateZ（225px）; transform: translateZ（225px）;}#css3dimageslider ul li:nth-child（2） { -webkit-transform: rotateY（90deg） translateZ（225px）; -moz-transform: rotateY（90deg） translateZ（225px）; -ms-transform: rotateY（90deg） translateZ（225px）; transform: rotateY（90deg） translateZ（225px）;}#css3dimageslider ul li:nth-child（3） { -webkit-transform: rotateY（180deg） translateZ（225px）; -moz-transform: rotateY（180deg） translateZ（225px）; -ms-transform: rotateY（180deg） translateZ（225px）; transform: rotateY（180deg） translateZ（225px）;}#css3dimageslider ul li:nth-child（4） { -webkit-transform: rotateY（-90deg） translateZ（225px）; -moz-transform: rotateY（-90deg） translateZ（225px）; -ms-transform: rotateY（-90deg） translateZ（225px）; transform: rotateY（-90deg） translateZ（225px）;}#css3dimageslider.transparency img { opacity: 0.7;}

JavaScript
最后在jQuery代码中，在点击按钮的时候相应的#css3dimageslider ul元素的rotateY属性，是器旋转，并为其添加一个.active class。

<script> $（document）.ready（function（） {$（"#css3dimagePager li"）.click（function（）{ var rotateY = （$（this）.index（） * -90）;$（"#css3dimageslider ul"）.css（{"-webkit-transform":"rotateY（"+rotateY+"deg）", "-moz-transform":"rotateY（"+rotateY+"deg）", "-ms-transform":"rotateY（"+rotateY+"deg）", "transform":"rotateY（"+rotateY+"deg）"}）;$（"#css3dimagePager li"）.removeClass（"active"）;$（this）.addClass（"active"）; }）;$（"#css3dtransparency"）.click（function（） {$（"#css3dimageslider"）.toggleClass（"transparency"）;$（this）.toggleClass（"active"）; }）;}）;</script>

以上就是jQuery结合CSS3来制作3D立方体旋转效果的关键代码分享，希望对大家学习有所帮助。