CSS3 2D轉換的旋轉和縮放

2021-10-07 18:13:00 字數 587 閱讀 1986

轉換(transform)是css3中具有顛覆性的特徵之一 可以實現元素的位移、旋轉、縮放 等效果

轉換(transform)可以簡單埋解為變形

移動: translate

旋** rotate

縮放: scale

2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。

transform : rotate ( 度數 );
rotate裡面跟度數 單位是deg. 比如 rotate ( 45deg );

縮放,顧名思義,可以放大和縮小。只要給元素新增上了這個屬性就能控制它放大還是縮小。

CSS3 2D轉換方法

利用transform 可以實現旋轉 縮放 傾斜 移動 屬性有 translate scale 移動 translatex 10px 水平方向移動10px translatey 50px 垂直方向移動50px translate 10px 水平方向移動10px translate 10px,50px...

CSS3 2D轉換模組

2d轉換模組 屬性 transform 方法 rotate 元素順時針旋轉給定的角度,負值時,元素將逆時針旋轉,單位deg。有rotatex rotatey rotatez,預設z translate 元素從其當前位置移動,根據給定的 left x 座標 和 top y 座標 位置引數。有trans...

CSS3 2D轉換用法

1,translate 方法 translate translate 方法,根據左 x軸 和頂部 y軸 位置給定的引數,從當前元素位置移動。例項div 2,rotate 方法 rotate rotate 方法,在乙個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。例項div 3,sca...