<!DOCTYPE html>
<html>
<head>
<title>3D布局</title>
<style type="text/css" media="screen">
#box{
width:190px;
height:170px;
/*background: url(6.jpg) no-repeat;*/
-webkit-perspective:800px;
position: absolute;
}
#box div{
position:absolute;
left:10px;
width:10px;
height: 170px;
background:url(6.jpg) no-repeat;
background-size: cover;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style: perspective-3d;
-moz-transform-origin: left 160px;
}
#box>div{
left:0;
transform: translateX(100px);
}
.show{
transform:rotateY(-40deg) rotateX(2deg);
}
</style> </head>
<body>
<div id="box">
<div>
<div style="background-position:-10px">
<div style="background-position:-20px">
<div style="background-position:-30px">
<div style="background-position:-40px">
<div style="background-position:-50px">
<div style="background-position:-60px">
<div style="background-position:-70px">
<div style="background-position:-80px">
<div style="background-position:-90px">
<div style="background-position:-100px">
<div style="background-position:-110px">
<div style="background-position:-120px">
<div style="background-position:-130px">
<div style="background-position:-140px">
<div style="background-position:-150px">
<div style="background-position:-160px">
<div style="background-position:-170px">
<div style="background-position:-180px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
var oDiv = $('#box div');
setTimeout(function(){
oDiv.each(function(){
$(this).addClass('show');
$(this).css('transition','.5s')
});
},2000);
setTimeout(function(){
oDiv.each(function(){
$(this).removeClass('show');
$(this).css('transition','.5s')
});
},4000)
</script>
</body>
</html>
