css3动画实现旋转木马

写旋转木马的时候，突发奇想想加个遮罩效果，那当然是用box-reflect属性了，写的效果就是不出来，原来就是手残给包图片的li标签加了个overflow：hidden，也是醉了哈哈哈哈，去掉就好啦，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

*{margin:0;padding:0}
html,body{width:100%;height:100%;}
body{background: url(img1/pic6.jpg) no-repeat ; background-size:cover}
ul{width:200px;height:300px; position: absolute; top:0;right:0;left:0;bottom:0;margin:auto;
transform-style: preserve-3d; transition: all 50s; animation: move 5s ease-in-out infinite;}
ul li{ list-style:none;width:180px;height:260px; position: absolute;left:0;top:0; /*overflow:hidden;*/
}
ul li img{width:100%;height:100%;
-webkit-box-reflect:below 10px linear-gradient(rgba(255,255,255,0)50%,rgba(255,255,255,0.7));
}
.img1{ transform: translateZ(350px)}
.img2{ transform: rotateY(30deg) translateZ(360px);}
.img3{ transform: rotateY(60deg) translateZ(360px);}
.img4{ transform: rotateY(90deg) translateZ(360px);}
.img5{ transform: rotateY(120deg) translateZ(360px);}
.img6{ transform: rotateY(150deg) translateZ(360px);}
.img7{ transform: rotateY(180deg) translateZ(360px);}
.img8{ transform: rotateY(210deg) translateZ(360px);}
.img9{ transform: rotateY(240deg) translateZ(360px);}
.img10{ transform: rotateY(270deg) translateZ(360px) ;}
.img11{ transform: rotateY(300deg) translateZ(360px);}
.img12{ transform: rotateY(330deg) translateZ(360px);}

@-webkit-keyframes move{
from{ transform: rotate3d(0,0,1,45deg);}
to{ transform: rotate3d(1,2,1,1000deg);}
}
body:hover ul{ transform: rotateY(45deg);}
</style> 
</head>
<body>
<ul>
<li class="img1"><img src="img1/img5.jpg" ></li>
<li class="img2"><img src="img1/pic2.jpg" ></li>
<li class="img3"><img src="img1/pic4.jpg" ></li>
<li class="img4"><img src="img1/pic6.jpg" ></li>
<li class="img5"><img src="img1/pic7.jpg" ></li>
<li class="img6"><img src="img1/pic9.jpg" ></li>
<li class="img7"><img src="img1/img5.jpg" ></li>
<li class="img8"><img src="img1/pic2.jpg" ></li>
<li class="img9"><img src="img1/pic4.jpg" ></li>
<li class="img10"><img src="img1/pic6.jpg" ></li>
<li class="img11"><img src="img1/pic7.jpg" ></li>
<li class="img12"><img src="img1/pic9.jpg" ></li>
</ul>
<script type="text/javascript">
//var tz = Math.round( (180/ 2 ) / Math.tan( Math.PI / 10) );
//alert(tz);
</script>
</body>
</html>

　　

posted @ 2017-08-13 21:48  doublealoe  阅读(296)  评论(0)  编辑  收藏  举报