本文介绍了如何利用jQuery CSS3实现三维(三维的缩写)立方体旋转效果，先看一看效果图：

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

超文本标记语言结构三维(三维的缩写)图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。

section div id=' css3 imageslider ' class=' transparency ' ul Li img src=' http : img/css3 dimg 1。jpg '/Li Li img src=' http : img/css3 dimg 2。jpg '/Li Li img src=' http : img/css3 dimg 3。jpg '/Li Li img src=' http 3360 img/css3 dimg 4。jpg/Li/ul/div ul点击上面的按钮切换图片/p/sectionCSS样式为了制作三维(三维的缩写)透视效果，需要在# css3dimageslider元素上设置远景透视属性，并在它里面的无序列表元素上设置变换样式： preserve-3d；由于工业管理学(工业工程)浏览器不支持这个属性，所以在工业管理学(工业工程)浏览器中是看不到效果的。接下来通过第：个孩子选择器分别选择每一个列表项，并通过平移和rotateY属性对它们进行三维(三维的缩写)转换，形成立方体效果。

# css3dimagePager，# css3 transparency { text-align : center；相对位置：z指数： 11；padding: 0 0 10pxmargin : 0} # css3 image page Li { padding-right : 2em；显示器：内联块；光标：指针；} # css3 image pager Li . active，# css3 transparency。活动{ font-weight : bold；} # css3 imageslider {-web套件-透视图： 800；-moz-透视： 800像素；-ms-透视： 800；透视： 800;-网络套件-透视图-产地： 50% 100 px；-moz-透视-原点： 50% 100px；-ms-透视-原点： 50% 100像素；透视-原始： 50% 100像素；余量： 100像素汽车20px汽车；宽度： 450像素；高度： 400像素；} # css3 imageslider ul {位置：相对；余量： 0自动高度： 281px宽度： 450像素；列表样式：无；-web套件-转换-style : preserve-3d；-moz-transform-style : preserve-3d；-ms-transform-style : preserve-3d；变换样式： preserve-3d；-网络套件-转换-origin : 50% 100 px 0；-moz-transform-origin : 50% 100px 0；-ms-transform-origin : 50% 100 px 0；变换原点： 50% 100px 0；-WebKit-transit :全1.0s简易版；-moz-transit :全1.0s轻松版；-ms-transit :全1.0s简易版；过渡：全1.0s轻松版；} # css3 imageslider ul Li {位置：绝对值；高度： 281px宽度： 450像素；padd : 0px } # css3 imageslider ul Li : th-child(1){-web kit-transform : translateZ(225 px)；-moz-transform : translateZ(225 px)；-ms-transform : translateZ(225 px)；transform : translateZ(225 px)；} # css3 imageslider ul Li : th-child(2){-web kit-transform : rotateY(90度)translate ez(225 px)；-moz-transformer : rotateY(90度)translate ez(225 px)；-ms-transform : rotateY(90度)翻译ez(225 px)；变换：旋转(90度)平移ez(225像素)；} # css3 imageslider ul Li : th-child(3){-web kit-transform : rotateY(180度)translate ez(225 px)；-moz-transformer : rotateY(180度)平移ez(225 px)；-ms-transform : Rotatey(180)translate ez(225 px)；变换：旋转(180度)平移ez(225像素)；} # css3 imageslider ul Li : th-child(4){-web kit-transform : rotateY(-90)translateZ(225 px)；-moz-transformer : rotateY(-90)translate ez(225 px)；-ms-transform : Rotatey(-90)translateZ(225 px)；变换：旋转(-90)平移(225像素)；} # css3 imageslider。透明度img { opa city 3360 0.7} JavaScript

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

脚本$(文档)。ready(function(){ $(' # css3 image page Li ')).单击(function(){ var rotateY=($(this)).index()*-90)；$(' # css3 imageslider ul ').CSS({ '-web kit-transform ' : ' rotateY(' rotateY ' deg ')，'-moz-transform ' : ' rotateY(' rotateY ' deg ')，'-ms-transform ' : ' rotateY(' rotateY ' deg ')，' transform ' : ' rotateY(' rotateY ' deg ')})；$(' # css3 image page Li ').移除CLaSS(' active ')；$(这个)。添加CLaSS(' active ')；});$(' # css3透明度').单击(function(){ $(' # css3 imageslider ').切换类(“透明度”)；$(这个)。切换类(“活动的”)；});});/script以上就是jQuery结合CSS3来制作三维(三维的缩写)立方体旋转效果的关键代码分享，希望对大家学习有所帮助。