<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>杂乱圆形3D图片</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #000;
}
.wrap{
width: 120px;
height: 180px;
margin: 200px auto;
position: relative;
transform-style:preserve-3d ;/*创建3D环境*/
transform: perspective(800px) rotateX(-10deg) rotateY(8deg);
/*transform允许图片从2D到3D perspective(800px)景深特效*/
/*transitoion 过渡*/
}
.wrap img{
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 0 10px #fff;
position: absolute;
top: 0;
left: 10px;
-webkit-box-shadow: 0 0 10px #fff;/*-兼容-moz- -ms- -o-*/
-webkit-box-reflect: below 8px -webkit-linear-gradient(top,rgba(255,255,255,0)40%,rgba(255,255,255,1)100%);/*倒影效果*/
/*-webkit-linear-gradient()线性渐变 渐变规则：1渐变方向 2渐变颜色开始 3渐变颜色结束*/
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function(){
//等DOM构造完成后执行js代码
var oSize=$('.wrap img').length;
var oDeg=360/11;
console.log(oSize);
$('.wrap img').each(function(i){/*找到所有的图片进行遍历*/
$(this).css({/*对每一张图片的位置进行改变*/
'transform':'rotateY('+i * oDeg+'deg)translateZ(350px)'
})
})
})
</script>
</head>
<body>
<div class="wrap">
<img src="img/img01.png" />
<img src="img/img02.png" />
<img src="img/img03.png" />
<img src="img/img04.png" />
<img src="img/img05.png" />
<img src="img/img06.png" />
<img src="img/img07.png" />
<img src="img/img08.png" />
<img src="img/img09.png" />
<img src="img/img10.png" />
<img src="img/img11.png" />
</div>
</body>
</html>
浙公网安备 33010602011771号