transform应用详解

关于css3的transform，做了一个demo，上代码

html：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <link rel="stylesheet" href="practice.css" type="text/css" >
 5 <script src="../js/jquery-2.1.1.min.js" type="text/javascript" ></script>
 6 <meta charset="UTF-8">
 7 <title>transform</title>
 8 </head>
 9 <body>
10 <div class="container">
11   <div class="out">
12       <ul>
13          <li class="in"><img src='1.jpg' /></li>
14          <li class="in"><img src='2.jpg' /></li>
15          <li class="in"><img src='3.jpg' /></li>
16          <li class="in"><img src='4.jpg' /></li>
17          <li class="in"><img src='5.jpg' /></li>
18       </ul>
19   </div>
20   <div class="control">
21      <div class='detail'>
22         <span>transform-style:&nbsp;&nbsp;&nbsp;flat:<input type="radio" name='style' value='flat'/>&nbsp;&nbsp;&nbsp;preserve-3d:<input type="radio" name='style' value='preserve-3d' /></span>
23         <p>你选择transform_style为<span></span></p>
24      </div>
25      <div class='detail'>
26         <span>perspective:</span><input name='perspective' type="range" min='0' max='800' value='0' step='1'/>
27         <p>你选择的perspective值为<span></span></p>
28      </div>
29      <div class='detail'>
30         <span>translateX:</span><input name='translateX'  type="range" min='0' max='50' value='0' step='1'/>
31         <p>你选择的translateX值为<span></span></p>
32      </div>
33      <div class='detail'>
34         <span>translateY：</span><input name='translateY' type="range" min='0' max='50' value='0' step='1'/>
35         <p>你选择的translateY值为<span></span></p>
36      </div>
37      <div class='detail'>
38         <span>translateZ：</span><input name='translateZ' type="range" min='0' max='50' value='0' step='1'/>
39         <p>你选择的translateZ值为<span></span></p>
40      </div>
41      <div class='detail'>
42         <span>rotateX：</span><input name='rotateX' type="range" min='0' max='180' value='0' step='1'/>
43         <p>你选择的rotateX值为<span></span></p>
44      </div>
45      <div class='detail'>
46         <span>rotateY：</span><input name='rotateY' type="range" min='0' max='180' value='0' step='1'/>
47         <p>你选择的rotateY值为<span></span></p>
48      </div>
49      <div class='detail'>
50         <span>rotateZ：</span><input name='rotateZ' type="range" min='0' max='180' value='0' step='1'/>
51         <p>你选择的rotateZ值为<span></span></p>
52      </div>
53   </div>
54 </div>

css比较简单，就不上了

js:

<script>
$(function(){
    var transform_style='flat',translateX='0px',translateY='0px',translateZ='0px',perspective='0px',rotateX=0,rotateY=0,rotateZ=0;    
    $("input").on('change',function(){                
        if($(this).attr('name')==='style'){                
            if($(this).is(":checked")){
                transform_style=$(this).val();
                $("ul").css({"transform-style":transform_style});
                $(this).parent().siblings('p').find('span').text(transform_style)    ;
            }
        }else{                    
            var change=$(this).attr('name');
            var val=$(this).val();                        
            switch(change){
                case 'perspective':
                    perspective=val+'px';
                    break;
                case 'translateX':                
                    translateX=val+'px';
                    break;
                case 'translateY':
                   translateY=val+'px';
                   break;
                case 'translateZ':
                   translateZ=val+'px';
                   break;
                case 'rotateX':                                
                    rotateX=val;
                    break;
                case 'rotateY':
                   rotateY=val;
                   break;
                case 'rotateZ':
                   rotateZ=val;
                   break;
            }            
            $(this).siblings('p').find('span').text(val);            
            $('.in').css({'-webkit-transform':'perspective('+perspective+') translate3d('+translateX+','+translateY+','+translateZ+') rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)'})                
        }        
    })    
})
</script>