CSS3詳解：transform、transition

CSS3 transform是什么？

transform的含義是：改變，使…變形；轉換

 

CSS3 transform都有哪些常用屬性？

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。

下面我們來分解各個屬性的用法：

transform:rotate()：

含義：旋轉；其中“deg”是“度”的意思，如“10deg”表示“10度”。

.demo_transform1{
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

 

transform:skew()：

含義：傾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。

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

 

transform:scale(x,y)：

含義：比例；可傳2個值，當寫一個時，表示xy都一樣，“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則為負“-”。

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

 

transform:translate(x,y)：

含義：變動，位移；可以傳3個值，x、y。

也可以寫成 translateX( ), translateY( ).

如表示向右位移100像素，即第一個值為100px，如果向上位移，把后面的“0”改個值就行，向左向下位移則為負“-”。

.demo_transform2{
    transform:translate(100px,0);
    -webkit-transform:translate(100px,0);
    -moz-transform:translate(100px,0);
}

或者

.demo_transform2{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
}

 

CSS3 transition 過度效果

當鼠標經過時，寬度邊為300px,時長為 2 秒：

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
}
div:hover {
width:300px;
}

transition有4個屬性:

1、transition-property：規定應用過渡的 CSS 屬性的名稱。with可獲得寬度屬性，height可獲得高度屬性，transform可獲得動畫屬性，all 可以獲取所有屬性，所以推薦寫all

2、transition-duration：定義過渡效果花費的時間。默認是 0。

3、transition-timing-function：規定過渡效果的時間曲線。默認是 "ease"。有5個屬性，分別為：

• linear--勻速   規定以相同速度開始至結束的過渡效果   
• ease--慢-快-慢   規定慢速開始，然后變快，然后慢速結束的過渡效果
• ease-in--慢-快   規定以慢速開始的過渡效果
• ease-out--快-慢   規定以慢速結束的過渡效果
• ease-in-out--慢-快-慢   規定以慢速開始和結束的過渡效果

4、transition-delay：規定過渡效果何時開始。默認是 0。

4個屬性可以合起來寫

div{
    transition: all 1s linear .5s;
    /*4個屬性分別表示：所有屬性都有動作效果、動作時間為1S、速度為勻速、延遲0.5S開始動畫*/
}