transform的属性包括：1、rotate（旋转） 2、skew（斜切） 3、scale（缩放） 4、translate（位移变化），其中还有x,y之分，比如：rotateX，rotateY，以此类推。

　　transform：rotate();

如：

@keyframes icon_3 {
       0% {        transform: rotate(0deg);    }    50% {
           opacity: 1    }    100% {
           transform: rotate(360deg);        opacity: 0.2    }}

含义：旋转；其中“deg”是“度”的意思

      transform：skew(20deg);

如

.demo_transform2{
   -webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

这个属性我目前还没有用过，也不多见，日后在分析。　　

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform3{
   -webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

@-webkit-keyframes pic_3_icon_l {
       0% {        opacity: 0;        -webkit-transform: scale(0, 0);    }    15.5% {
           opacity: 0;        -webkit-transform: scale(0, 0);    }    20.5% {
           opacity: 1;        -webkit-transform: scale(0.9, 0.9);    }    72.5% {
           opacity: 1;        -webkit-transform: scale(1, 1);    }    100% {
           opacity: 0;        -webkit-transform: scale(1.2, 1.2);    }}

   

scale(x,y) 对元素进行缩放 ：

• X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

• Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

transform:translate(x,y)：

• 取值x表示x轴过渡值
• 取值y表示y轴过渡值，如果没有赋值，则默认为0
• 默认以元素的中心点为基点，可以通过transform-origin进行基点的设置
• x，y如果为负值就反方向移动

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform4{
   -webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}