效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
margin:0px;
padding: 0px;
}
.box
{
position: relative;
width: 1200px;
height: 800px;
margin: 50px;
perspective: 1000px;
}
img
{
position: absolute;
left: 600px;
top: 200px;
}
.box2
{
transform-style: preserve-3D;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
for(var i = 0; i < 98; i++)
{
$("<img src='images/d/"+i+".jpg'>").appendTo(".box2");
}
//粑粑形状
// $("img").each(function (i) {
// $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + i * 4 + "px) translateY(" + (i * 6 - 300) + "px)"});
// });
//相机形状
// $("img").each(function (i) {
// $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + (i * 5) + "px) "});
// });
//螺旋形状
$("img").each(function (i) {
$(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + 300 + "px) translateY(" + i * 6 + "px)"});
});
//定时器
var idx = 0;
setInterval(function () {
idx++;
$(".box2").css({"transform" : "rotateY("+idx+"deg)"});
},20);
</script>
</body>
</html>