3D布局
<!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>