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開始動畫*/ }

?

轉載于:https://www.cnblogs.com/shiweida/p/7785185.html

總結

以上是生活随笔為你收集整理的CSS3详解：transform、transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。