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