HTML5 CSS3 實現3D輪播效果

標籤：css   padding   中心   pac   spec   blog   輪播   out   效果   

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);
}

 

運行：

 

HTML5 CSS3 實現3D輪播效果