transform 變形

transform 變形前端

經過 CSS3 變換,咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。使用transform屬性爲元素應用變換。動畫

一、Transform:對元素進行變形。spa

二、Transition:對元素某個屬性或多個屬性的變化,進行控制(時間等),相似flash的補間動畫。但只有兩個關鍵貞。開始,結束。3d

一.CSS3 2D 轉換orm

一、2D Transform轉換屬性blog

二、Transform 方法rem

①.移動 translateflash

translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動)it

translateX(x)僅水平方向移動(X軸移動)io

translateY(Y)僅垂直方向移動(Y軸移動)

②.縮放 scale

scale(x,y)使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮放)


scaleX(x)元素僅水平方向縮放(X軸縮放)


scaleY(y)元素僅垂直方向縮放(Y軸縮放)


③.旋轉 rotate

在一個給定度數順時針旋轉的元素。負值是容許的,這樣是元素逆時針旋轉。

④.傾斜 skew

skew(x,y)使元素在水平和垂直方向同時傾斜(X軸和Y軸同時按必定的角度值進行傾斜變形)


skewX(x)僅使元素在水平方向傾斜變形(X軸傾斜變形)


skewY(y)僅使元素在垂直方向傾斜變形(Y軸傾斜變形)

若是你們以爲個人文章寫的還不錯的話,就關注 收藏一下哦!

你們能夠一塊兒探討下前端問題呀!

rgz987

相關文章
相關標籤/搜索