translate()移動元素 接受標準度量單位
translatex | translatey | translatez | translate3d
scale()變大變小 接受乙個十進位制數
scalex | scaley | scalez | scale3d
rotate()旋轉 徑向度量單位deg
rotatex | rotatey | rotate3d
skew()傾斜元素 徑向度量單位deg
skewx | skewy
matrix3d()定義矩陣變形,基於x軸和y軸座標重新定義元素位置
perspective指定乙個透視投影矩陣。視距,用來設定使用者和元素3d空間z平面之間的距離
transform
疊加效果用空格隔開,而不是逗號
.test
transform-origin
設定變化的原點 乙個值 x軸 兩個值 x , y 三個值 x,y,z
transform-style制定巢狀元素如何在空間中呈現
flat 2d平面呈現 | preserve-3d 3d空間呈現
CSS3變形效果
css3提供了元素變形效果,也叫做變換。它可以將元素實現旋轉 縮放和平移的功能。transform指定應用的變換功能 transform origin指定變換的起點 transform的屬性值 none無變換 translate 長度值或百分數值 兩個方向平移元素 translatex 長度值或百分...
css3變形講解
transform變形 可以實現文字或者旋轉 縮放 傾斜和移動,並且該元素下的所有子元素都隨著父元素一樣。既然接觸到transform,我們就可以做好多3d的效果啦 旋 transform rotate 角度deg deg是css3的 values and units 模組中定義的乙個角度單位 縮放...
CSS3 變形 縮放 scale
縮放 scale 函式讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況 1 scale x,y 使元素水平方向和垂直方向同時縮放 也就是x軸和y軸同時縮放 例如 div hover注意 y是乙個可選引數,如果沒有設定y值,則表示x,y兩個方向的縮放倍數是一樣的。2 scalex x ...