css3動畫實現旋轉木馬

來源:互聯網
上載者:User

標籤:over   title   效果   alert   bottom   木馬   osi   原來   none   

寫旋轉木馬的時候,突發奇想想加個遮罩效果,那當然是用box-reflect屬性了,然鵝,卻被overflow:hidden坑了。。。。。。。

寫的效果就是不出來,太任性了有木有,代碼無誤呀,也沒報錯,但是出不來效果肯定是有原因的,原來就是手殘給包圖片的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>

css3動畫實現旋轉木馬

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.