總結一下這週在逆戰班的學習
transition-property : 規定設定過渡效果的css屬性的名稱。
all ( 預設值 ) , 指定 width , height;all。預設為所有可以進行過渡的css屬性。
如果提供多個屬性值，以逗號進行分隔。
transition-duration : 規定完成過渡效果需要多少秒或毫秒。
需要新增單位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定義過渡效果何時開始。
2s : 延遲兩秒進行過渡
-2s : 提前兩秒進行過渡
transition-timing-function : 規定速度效果的速度曲線。
運動形式：加速、減速、勻速...
linear
ease（預設值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ ）
復合寫法：
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：當總時間與延遲時間同時存在的時候，就有順序了，第乙個是總時間，第二個是延遲時間。
transition:2s 3s linear all; √
注意：不要把transition放到hover中
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
h1.test
.test li
.test li:hover
<
/style>
<
/head>
/h1>
="test"
>
本次設定過渡的屬性：width height<
包含位移(translate) 縮放(scale) 旋轉(rotate) 斜切(skew)
注：所有的變形操作，都不會影響到其他元素。(類似於相對定位)
注：變形操作對inline(內聯元素)不起作用的。
注：transform可以同時設定多個值。
先執行後面的操作，在執行前面的操作。
位移會受到後面要執行的縮放、旋轉和斜切的影響。
translate : 位移
transform:translate(100px,100px); : 兩個值 分別對應 x 和 y。
transform:translatex(100px);
transform:translatey(100px);
transform:translatez(100px); ( 3d )
scale : 縮放
transform:scale(num) num是乙個比例值，正常比例是1。
transform:scale(num1 , num2) 兩個值 分別對應 w 和 h
transform:scalex()
transform:scaley()
transform:scalez() ( 3d )
rotate : 旋轉
transform:rotate(num) num是旋轉的角度 30deg
正值：順時針旋轉
負值：逆時針旋轉
表示乙個角：角度deg 或 弧度rad
rotatex() ( 3d )
rotatey() ( 3d )
rotatez()
注 : rotate()跟rotatez()是等價關係。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，針對的是x 和 y
transform:skewx()
transform:skewy()
注：skew沒有3d寫法。
percentage： 用百分比指定座標值。可以為負值。
length： 用長度值指定座標值。可以為負值。
left： 指定原點的橫座標為left
center： 指定原點的橫座標為center
right： 指定原點的橫座標為right
top： 指定原點的縱座標為top
bottom： 指定原點的縱座標為bottom
css3動畫屬性
定義動畫 from to 等同於0 100 keyframes myfirst to webkit keyframes myfirst safari 和 chrome to 將動畫繫結到選擇器 div keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性，除了 animation...
CSS3動畫屬性
2d 3d 轉換屬性 transform 過渡屬性 transition 動畫屬性 animation transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。2d轉換 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。tra...
css3動畫屬性
1.變形的基點，在使用transform方法進行文字或影象變形的時候，預設是以元素的中心點為基準點進行變形的，使用transform origin屬性，可以改變變形的基準點，語法 transform origin left,center 2.移動動畫，方法語法 transform translate...