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>
时间： 2024-11-15 01:05:17