css 3d旋转木马
css 3d旋转木马
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 7 <style type="text/css"> 8 .wrap{perspective:800px;} 9 .rotateBox{transform-style:preserve-3d; position: relative;width: 200px;height:130px;margin:200px auto;transition:transform 1s;} 10 .rotateBox img{position:absolute;bottom: 0;box-shadow: 0 0 8px rgba(0,0,0,0.3);border:1px solid #fff;border-radius:5px;} 11 </style> 12 <script type="text/javascript"> 13 (function($, window, document, undefined){ 14 $.fn.rotateFn = function(){ 15 var pic = this.find('img'), 16 num = pic.length, 17 iw = pic.eq(0).width(), 18 deg = parseInt(360/num), 19 tz = iw / 2 / Math.tan(deg / 2 / 180 * Math.PI)+5, 20 d = 0; 21 pic.each(function(idx){ 22 $(this).css('transform','rotateY('+idx*deg+'deg) translateZ('+tz+'px)'); 23 }); 24 this.bind('click',function(){ 25 d += deg; 26 $(this).find('.rotateBox').css('transform','rotateY('+d+'deg)'); 27 }) 28 } 29 }(jQuery, window, document)) 30 31 $(function(){ 32 $('#rotateImg').rotateFn(); 33 }) 34 </script> 35 </head> 36 <body> 37 <div id="rotateImg" class="wrap"> 38 <div class="rotateBox"> 39 <img src="image/01.jpg" width="200"> 40 <img src="image/02.jpg" width="200"> 41 <img src="image/03.jpg" width="200"> 42 <img src="image/04.jpg" width="200"> 43 <img src="image/05.jpg" width="200"> 44 <img src="image/03.jpg" width="200"> 45 <img src="image/04.jpg" width="200"> 46 <img src="image/05.jpg" width="200"> 47 <img src="image/03.jpg" width="200"> 48 </div> 49 </div> 50 </body> 51 </html>
