CSS3動畫特效——transform詳解

transform讓css3可以做很優質的特效，transform的意思是：改變，使…變形，轉換。

在css3中transform的作用也是改變，讓元素傾斜，旋轉，縮放，位移。

下面來一一分解transform的作用，最后有一段小應用。

1）transform:rotate(); 元素旋轉

value(值)為旋轉度數，例：20deg。

默認順時針旋轉。

value若為負值則逆時針旋轉。

        .box{
            width:100px;height:100px;margin:20px auto;background-color:#75C934;
            text-align:center;line-height:100px;font-size:18px;
                        /*過渡效果*/
            -webkit-transition: transform 0.8s; 
        }
        .box:hover{
                        /*旋轉80°*/
            transform:rotate(80deg);
        }

2）transform:skew();元素傾斜

value(值)為傾斜度數，例：30deg。

value只有一個值，橫向默認向左傾斜；有兩個值，第二個值縱向默認向上傾斜。

value若為負值則反方向傾斜。

        .box{
                        /*樣式代碼同上就不寫了*/
            -webkit-transition: transform 0.8s,border-radius 0.8s; 
            border-radius:30px;
        }
        .box:hover{
            transform:skew(20deg,20deg);
            border-radius:0px;
        }

3）transform:scale();元素縮放

value(值)為縮放倍數，例：2。

value只有一個值，默認整體縮放；有兩個值，第一個值橫向縮放，第二個值縱向縮放。

value值大於1放大，小於1大於0縮小，負值則反向縮放(元素呈鏡像)

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;  
        }
        .box:hover{
            transform:scale(2,0.8);
            border-radius:40px;
        }

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;  
        }
        .box:hover{
            transform:scale(2,-0.8);
            border-radius:40px;
        }

4）transform:translate();元素位移

value(值)為位移像素，例：5px。

value只有一個值，橫向默認向右移動；有兩個值，第二個值縱向默認向下移動。

value若為負值則反方向移動。

                .box{
            -webkit-transition: transform 0.3s,box-shadow 0.3s;
        }
        .box:hover{
            transform:translate(-3px,-3px);
            box-shadow:3px 3px 5px 0px #000;
        }

 

總結：利用transform+transition可以做很多炫酷的頁面特效。