CSS3属性之transform学习笔记

     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)}