3D旋转轮播图

原创 437396649 随笔 css 490阅读 2018-01-20 16:17:03 举报

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;
}
body{
background:#000;
}

photos{

width:110px;
height:168px;
margin:160px auto;
transform:rotateY(0deg);  /*--沿着Y轴旋转0度*/
transform:rotateX(-10deg);
transform-style:preserve-3d;/*设置3d环境*/

}

photos img{

 width:100%; 
     height:100%; 
 position:absolute; 
 box-shadow:0 0 8px #eaeaea; 
 box-shadow: 1px -1px 6px #666; 
 border-radius:4px; 
 -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));   //上下倒影
 cursor:pointer;  //鼠标移上去时,鼠标指针发生变化

}

photos div{ width:1200px;

                height:1200px; 
                border-radius:50%; 
                position:absolute; 
            top:102%; 
        left:50%; 
            margin-left:-600px; 
        margin-top:-600px; 
        transform:rotateX(90deg); 
        background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0)); }

</style>
</head>

<body>
<div id="photos">
<img src="img/active-1.png">
<img src="img/active-2.png">
<img src="img/active-3.png">
<img src="img/active-4.png">
<img src="img/active-3.png">
<img src="img/active-2.png">
<div></div>
</div>
</body>
<script>
var photosDom = document.getElementById('photos');
var images = photosDom.getElementsByTagName('img'); //获取图片数组
var len = images.length; //获取图片数量
var deg = Math.floor(360 / len); <!--计算每张图片按Y轴旋转的角度 -->
for(var i = 0; i < len;i++)
{ images[i].style = 'transform : rotateY(' + deg i + 'deg) translateZ(380px)'; }//deg前面不要加空格
var x = 0;
setInterval(function()
{ photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++)
0.2 +"deg)"; }
,30);
</script>
</html>

//看完赶紧跑去学css3

作者: 剽悍一小兔
链接:https://www.imooc.com/article/22632
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复