作者:anilshen_333 | 来源:互联网 | 2023-10-10 17:54
jQuery+CSS3实现3D立方体旋转效果-本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图:切换图片过程中,图片进行旋转:HTML结构3D图片画廊
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图:
切换图片过程中,图片进行旋转:
HTML结构
3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作。
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。
以上就是jQuery结合CSS3来制作3D立方体旋转效果的关键代码分享,希望对大家学习有所帮助。