HTML5 CSS3 实现3D轮播效果

1.运用之前学到的知识，具体参考：

http://www.cnblogs.com/lexin593119348/p/6835457.html

补充知识点，旋转的时候以旋转元素为中心点，所以子元素的位置如果不以该元素为中心旋转的时候就会飘来飘去，想要固定下来的话可以将子元素的位置调整到以该元素为中心。

 

将正方体的各个面调整好位置和角度后，为父div添加旋转动画既可实现。

 

具体代码：

HTML：

<div class="outbox">
<div class="smallbox">
<div class="mydiv rx"><img src="img/1.jpg"></div>
<div class="mydiv ry"><img src="img/2.jpg"></div>
<div class="mydiv rz"><img src="img/3.jpg"></div>
<div class="mydiv tx"><img src="img/4.jpg"></div>
<div class="mydiv ty"><img src="img/5.jpg"></div>
<div class="mydiv tz"><img src="img/6.jpg"></div>
<div class="mydiv a"><img src="img/7.jpg"></div>
<div class="mydiv b"><img src="img/8.jpg"></div>
</div>
</div>

 

CSS：

body,html{
margin: 0;
padding: 0;
}
.outbox img{
width: 300px;
height: 300px;
}
.outbox{
width: 300px;
height: 300px;
margin: 200px auto 0;
}
.smallbox{
/*background: lavender;*/
border: solid;
width: 300px;
height: 300px;
transform-style: preserve-3d;
position: relative;
animation: anibox 15s infinite linear;
}
.smallbox:active{
animation-play-state: paused;
}
@keyframes anibox{
0%{-webkit-transform: perspective(1800px) rotateY(0deg);translateZ(0px);}
50%{-webkit-transform: perspective(1800px) rotateY(180deg);translateZ(0px);}
100%{-webkit-transform: perspective(1800px) rotateY(360deg);translateZ(0px);}
}
.mydiv{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.9;
}
.ty{
-webkit-transform:translateZ(475px);
}
.rz{
-webkit-transform:
rotateY(-45deg)
translateZ(460px)
translateX(50px);
}
.rx{
-webkit-transform:
rotateY(45deg)
translateZ(460px)
translateX(-50px);
}
.tx{
-webkit-transform:
rotateY(-90deg)
translateZ(410px)
translateX(70px);
}
.ry{
-webkit-transform:
rotateY(90deg)
translateZ(410px)
translateX(-70px);
}
.a{
-webkit-transform:
rotateY(135deg)
translateZ(380px)
translateX(-40px);
}
.b{
-webkit-transform:
rotateY(-135deg)
translateZ(380px)
translateX(40px);
}
.tz{
-webkit-transform:
rotateY(180deg)
translateZ(375px);
}

 

运行效果图：