CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-），本文为简化内容，直接使用了原版属性

根据不同属性的支持度，在实际使用的时候需要添加相应的浏览器前缀支持

目录： 变形transform 过渡transition 动画animation

一、变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作，通过例子来了解各个操作

1. 初始页面结构

       style   type  ="text/css"  >  
        html   {  
            font-family  :   Arial  ; 
         }  

        .box   {  
            position  :   relative  ;  
            margin  :   200px auto  ;  
            width  :   100px  ;  
            height  :   20px  ;  
            text-align  :   center  ;  
            border  :   1px solid #ddd  ;  
            background-color  :   #75e275  ;  
            cursor  :   pointer  ; 
         }  

        .left,
        .right   {  
            position  :   absolute  ;  
            top  :   -10px  ;  
            width  :   10px  ;  
            height  :   40px  ;  
            background-color  :   #4d8aeb  ; 
         }  

        .left   {  
            left  :   0  ; 
         }  

        .right   {  
            right  :   0  ; 
         }  

        .box:hover   {  
            transform  :   rotate(-30deg)  ; 
         } 
       style  >      

查看更多关于CSS3的变形transform、过渡transition、动画animation学习的详细内容...