css 2D变形

旋转rotate

旋转rotate()函数 通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为 正值 ，元素相对原点中心 顺时针 旋转；如果这个值为 负值 ，元素相对原点中心 逆时针 旋转。

transform:rotate(-20deg);

缩放动画scale   

scale()函数 让元素根据中心原点对对象进行缩放;

 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 如：

transform: scale(1.5,0.5); 如果第二个参数没有设置，则第二个参数等于第一个参数

2、scaleX(x)元素仅水平方向缩放（X轴缩放） 如：

  
  

   
   
   
   
transform: scale(2,1); 
    
    

     
     
     
     

      
      

       
       
       
       

        
        

         
         
         
         

          
          

           
           
           
           

            
            

             
             
             
             

              
              

               
               
               
               

                
                

                 
                 
                 
                 

                  
                  

                   
                   
                   
                   

                    
                    

                     
                     
                     
                     

                      
                      

                       
                       
                       
                       

                        
                        

                         
                         
                         
                         

                          
                          

                           
                           
                           
                           

                            
                            

                             
                             
                             
                             

                              
                              

                               
                               
                               
                               

                                
                                

                                 
                                 
                                 
                                 

                                  
                                  

                                   
                                   
                                   
                                   

                                    
                                    

                                     
                                     
                                     
                                     

                                      
                                      

                                       
                                       
                                       
                                       

                                        
                                        

                                         
                                         
                                         
                                         

                                          
                                          

                                           
                                           
                                           
                                           

                                            
                                            

                                             
                                             
                                             
                                             

                                              
                                              

                                               
                                               
                                               
                                               

                                                
                                                

                                                 
                                                 
                                                 
                                                 

                                                  
                                                  

                                                   
                                                   
                                                   
                                                   

                                                    
                                                    

                                                     
                                                     
                                                     
                                                     

                                                      
                                                      

                                                       
                                                       
                                                       
                                                       

                                                        
                                                        

                                                         
                                                         
                                                         
                                                         

                                                          
                                                          

                                                           
                                                           
                                                           
                                                           

                                                            
                                                            

                                                             
                                                             
                                                             
                                                             

                                                              
                                                              

                                                               
                                                               
                                                               
                                                               

                                                                
                                                                

                                                                 
                                                                 
                                                                 
                                                                 

                                                                  
                                                                  

                                                                   
                                                                   
                                                                   
                                                                   

                                                                    
                                                                    

                                                                     
                                                                     
                                                                     
                                                                     

                                                                      
                                                                      

                                                                       
                                                                       
                                                                       
                                                                       
高
                                                                        
                                                                        

                                                                         
                                                                         
                                                                         
                                                                         

                                                                          
                                                                          

                                                                           
                                                                           
                                                                           
                                                                           

                                                                            
                                                                            

                                                                             
                                                                             
                                                                             
                                                                             

                                                                              
                                                                              

                                                                               
                                                                               
                                                                               
                                                                               

                                                                                
                                                                                

                                                                                 
                                                                                 
                                                                                 
                                                                                 

                                                                                  
                                                                                  

                                                                                   
                                                                                   
                                                                                   
                                                                                   

                                                                                    
                                                                                    

                                                                                     
                                                                                     
                                                                                     
                                                                                     

                                                                                      
                                                                                      

                                                                                       
                                                                                       
                                                                                       
                                                                                       
度不变，
                                                                                      
                                                                                      
                                                                                    
                                                                                    
                                                                                  
                                                                                  
                                                                                
                                                                                
                                                                              
                                                                              
                                                                            
                                                                            

                                                                            
                                                                            

                                                                             
                                                                             
                                                                             
                                                                             

                                                                              
                                                                              

                                                                               
                                                                               
                                                                               
                                                                               

                                                                                
                                                                                

                                                                                 
                                                                                 
                                                                                 
                                                                                 

                                                                                  
                                                                                  

                                                                                   
                                                                                   
                                                                                   
                                                                                   

                                                                                    
                                                                                    

                                                                                     
                                                                                     
                                                                                     
                                                                                     

                                                                                      
                                                                                      

                                                                                       
                                                                                       
                                                                                       
                                                                                       

                                                                                        
                                                                                        

                                                                                         
                                                                                         
                                                                                         
                                                                                         

                                                                                          
                                                                                          

                                                                                           
                                                                                           
                                                                                           
                                                                                           

                                                                                            
                                                                                            

                                                                                             
                                                                                             
                                                                                             
                                                                                             

                                                                                              
                                                                                              

                                                                                               
                                                                                               
                                                                                               
                                                                                               

                                                                                                
                                                                                                

                                                                                                 
                                                                                                 
                                                                                                 
                                                                                                 

                                                                                                  
                                                                                                  

                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   

                                                                                                    
                                                                                                    

                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     

                                                                                                      
                                                                                                      

                                                                                                       
                                                                                                       
                                                                                                       
                                                                                                       

                                                                                                        
                                                                                                        

                                                                                                         
                                                                                                         
                                                                                                         
                                                                                                         

                                                                                                          
                                                                                                          

                                                                                                           
                                                                                                           
                                                                                                           
                                                                                                           
宽
                                                                                                            
                                                                                                            

                                                                                                             
                                                                                                             
                                                                                                             
                                                                                                             

                                                                                                              
                                                                                                              

                                                                                                               
                                                                                                               
                                                                                                               
                                                                                                               

                                                                                                                
                                                                                                                

                                                                                                                 
                                                                                                                 
                                                                                                                 
                                                                                                                 

                                                                                                                  
                                                                                                                  

                                                                                                                   
                                                                                                                   
                                                                                                                   
                                                                                                                   

                                                                                                                    
                                                                                                                    

                                                                                                                     
                                                                                                                     
                                                                                                                     
                                                                                                                     

                                                                                                                      
                                                                                                                      

                                                                                                                       
                                                                                                                       
                                                                                                                       
                                                                                                                       

                                                                                                                        
                                                                                                                        

                                                                                                                         
                                                                                                                         
                                                                                                                         
                                                                                                                         

                                                                                                                          
                                                                                                                          

                                                                                                                           
                                                                                                                           
                                                                                                                           
                                                                                                                           
度变成之前的2倍
                                                                                                                          
                                                                                                                          
                                                                                                                        
                                                                                                                        
                                                                                                                      
                                                                                                                      
                                                                                                                    
                                                                                                                    
                                                                                                                  
                                                                                                                  
                                                                                                                
                                                                                                                
                                                                                                              
                                                                                                              
                                                                                                            
                                                                                                            
                                                                                                          
                                                                                                          
                                                                                                        
                                                                                                        
                                                                                                      
                                                                                                      
                                                                                                    
                                                                                                    
                                                                                                  
                                                                                                  
                                                                                                
                                                                                                
                                                                                              
                                                                                              
                                                                                            
                                                                                            
                                                                                          
                                                                                          
                                                                                        
                                                                                        
                                                                                      
                                                                                      
                                                                                    
                                                                                    
                                                                                  
                                                                                  
                                                                                
                                                                                
                                                                              
                                                                              
                                                                            
                                                                            
                                                                          
                                                                          
                                                                        
                                                                        
                                                                      
                                                                      
                                                                    
                                                                    
                                                                  
                                                                  
                                                                
                                                                
                                                              
                                                              
                                                            
                                                            
                                                          
                                                          
                                                        
                                                        
                                                      
                                                      
                                                    
                                                    
                                                  
                                                  
                                                
                                                
                                              
                                              
                                            
                                            
                                          
                                          
                                        
                                        
                                      
                                      
                                    
                                    
                                  
                                  
                                
                                
                              
                              
                            
                            
                          
                          
                        
                        
                      
                      
                    
                    
                  
                  
                
                
              
              
            
            
          
          
        
        
      
      
    
    
   
   
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） 如：

   
   

    
    

     
     
     
     

      
      

       
       
       
       
transform: scale(1,2);  宽度不变，高度变成之前的2倍
      
      
    
    
  
  

注：参数值为正数值放大元素；负数值先翻转元素，再缩放元素；0.01~0.99之间缩小元素

位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

1、translate(x,y)水平方向和垂直方向同时移动 （也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。

transform: translate(100px,50px);

倾斜 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2、skewX(x)仅使元素在水平方向扭曲变形 （X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。