CSS3 2D轉換模組

2022-08-29 04:33:09 字數 708 閱讀 7949

2d轉換模組

屬性:transform

方法:rotate()      元素順時針旋轉給定的角度,負值時,元素將逆時針旋轉,單位deg。

有rotatex、rotatey、rotatez,預設z

translate() 元素從其當前位置移動,根據給定的 left(x 座標) 和 top(y 座標) 位置引數。

有translatex,translatey

scale()       元素的尺寸會增加或減少,根據給定的寬度(x 軸)和高度(y 軸)引數。引數》1時,放大;引數<1時,縮小。

有scalex,scaley

注意點:

1.如果需要進行多個轉換,那麼用空格隔開

2.2d轉換模組會修改元素的座標系,所以旋轉後在平移就不是水平平移了

例:transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

屬性:transform-origin (形變中心點)

transform-origin : x y; x水平方向 y垂直方向

引數:具體畫素(15px),百分比(15%),特殊關鍵字(right center bottom)

屬性:perspective 

perspective:150px; 畫素表示距離

透視:近大遠小 透視屬性必須新增到需要呈現近大遠小效果的元素的父元素上面

CSS3 2D轉換方法

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

CSS3 2D轉換用法

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

CSS3 2D轉換的旋轉和縮放

轉換 transform 是css3中具有顛覆性的特徵之一 可以實現元素的位移 旋轉 縮放 等效果 轉換 transform 可以簡單埋解為變形 移動 translate 旋 rotate 縮放 scale 2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。transform rotate ...