3D轮播
纯css3实现3D轮播
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{margin: 0;}.container{width: 400px;height: 100px;margin: 300px auto;perspective: 1000px;}.img_box{width: 400px;transform-style: preserve-3d;position: relative;animation: rotate 10s infinite;}.img_box:hover{animation-play-state: paused;}@keyframes rotate{0%{transform: rotateY(0deg);}16.6%{transform: rotateY(60deg);}33.2%{transform: rotateY(120deg);}49.8%{transform: rotateY(180deg);}66.4%{transform: rotateY(240deg);}83%{transform: rotateY(300deg);}100%{transform: rotateY(360deg);}}img{position: absolute;width: 400px;}img:nth-child(1) { transform: rotateY(0deg) translateZ(420px); }img:nth-child(2) { transform: rotateY(60deg) translateZ(420px); }img:nth-child(3) { transform: rotateY(120deg) translateZ(420px); }img:nth-child(4) { transform: rotateY(180deg) translateZ(420px); }img:nth-child(5) { transform: rotateY(240deg) translateZ(420px); }img:nth-child(6) { transform: rotateY(300deg) translateZ(420px); } </style></head><body><div class="container"><div class="img_box" id="box"><img src="img/pic1.jpg" data-index="1" /><img src="img/pic2.jpg" data-index="2" /><img src="img/pic3.jpg" data-index="3" /><img src="img/pic4.jpg" data-index="4" /><img src="img/pic5.jpg" data-index="5" /><img src="img/pic6.jpg" data-index="6" /></div></div></body>
</html>
更多推荐
3D轮播
发布评论