過渡與變形

2021-10-12 08:26:58 字數 675 閱讀 4278

1.html body

2.加vh:視高 height:100vh;

vw:a視線寬度 weight:100vw;

translate():平移(位移);不會影響其它元素位置;對行內標籤沒有效果。

乙個值:只位移x軸;

兩個值:第乙個值位移x軸,第二個值位移y軸;

translatey():y軸位移;

translatex():x軸位移;

scale(x,y):使元素水平方向和垂直方向同時縮放(也就是x軸y軸同時縮放)。沒有設定y值,則表示x,y兩個方向的倍數是一樣的。

2.scalex(x)元素僅水平方向縮放(x軸縮放)

3.scaley(y)元素僅垂直方向縮放(y軸縮放)

scale()的取值預設的值為1,當值設定為0.01到0.99之間的任何值,作為使用乙個元素[b]縮小[/b];而任何大於或等於1.01的值。作用是讓元素[b]放大[/b]。

乙個值:寬高同時縮放;

二個值:第乙個值縮放寬度,第二個縮放高度;

rotate():旋轉,單位度數deg;

正數:順時針旋轉;

負數:逆時針旋轉;

skew():斜切(傾斜),單位度數deg;

過渡與變形(1)

translate 位移 scale 縮放 rotate 旋轉 skew 傾斜 transform origin中心點 transform translate 100px,100px 可寫畫素,可寫百分比 相對於父級 可寫負數 transform translate 100px,100px rota...

過渡 變形 動畫

transition all 0.3s linear 0 要過渡的屬性 過渡執行的時間 運動速度 何時開始 注意 組合寫法 旋轉之後,座標會跟著旋轉 移動 transform translate 50 40 x軸位移 50 y軸位移 40 transform translatex 30px x軸移動...

css 過渡和 變形

一 過渡 transition transition property 指定具有過渡效果的css樣式屬性名 1.預設值 all 2.僅具有中間值 css樣式值是數值的 的css樣式具有過渡效果 3.可以具體指定那些樣式具有過渡效果,多個css樣式屬性名使用 分割 transition duratio...