css3學習總結7 CSS3 2D轉換

2021-09-07 00:20:08 字數 1446 閱讀 1365

通過 css3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

在本次,您將學到如下 2d 轉換方法:

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

示例:

div

值 translate(50px,100px) 把元素從左側移動 50 畫素,從頂端移動 100 畫素。

通過 rotate() 方法,元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。

例項

div

值 rotate(30deg) 把元素順時針旋轉 30 度。

通過 scale() 方法,元素的尺寸會增加或減少,根據給定的寬度(x 軸)和高度(y 軸)引數:

示例**:

div

值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍,把高度轉換為原始高度的 4 倍。

通過 skew() 方法,元素翻轉給定的角度,根據給定的水平線(x 軸)和垂直線(y 軸)引數:

示例**

div

值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度,圍繞 y 軸翻轉 20 度。

matrix() 方法把所有 2d 轉換方法組合在一起。

matrix() 方法需要六個引數,包含數學函式,允許您:旋轉、縮放、移動以及傾斜元素。

示例**

如何使用 matrix 方法將 div 元素旋轉 30 度:

div

函式描述

matrix(n,n,n,n,n,n)

定義 2d 轉換,使用六個值的矩陣。

translate(x,y)

定義 2d 轉換,沿著 x 和 y 軸移動元素。

translatex(n)

定義 2d 轉換,沿著 x 軸移動元素。

translatey(n)

定義 2d 轉換,沿著 y 軸移動元素。

scale(x,y)

定義 2d 縮放轉換,改變元素的寬度和高度。

scalex(n)

定義 2d 縮放轉換,改變元素的寬度。

scaley(n)

定義 2d 縮放轉換,改變元素的高度。

rotate(angle)

定義 2d 旋轉,在引數中規定角度。

skew(x-angle,y-angle)

定義 2d 傾斜轉換,沿著 x 和 y 軸。

skewx(angle)

定義 2d 傾斜轉換,沿著 x 軸。

skewy(angle)

定義 2d 傾斜轉換,沿著 y 軸。

css3學習總結7 CSS3 2D轉換

通過 css3 轉換,我們能夠對元素進行移動 縮放 轉動 拉長或拉伸。在本次,您將學到如下 2d 轉換方法 通過 translate 方法,元素從其當前位置移動,根據給定的 left x 座標 和top y 座標 位置引數 示例 div 值 translate 50px,100px 把元素從左側移動...

css3學習總結7 CSS3 2D轉換

通過 css3 轉換,我們能夠對元素進行移動 縮放 轉動 拉長或拉伸。在本次,您將學到如下 2d 轉換方法 通過 translate 方法,元素從其當前位置移動,根據給定的 left x 座標 和top y 座標 位置引數 示例 div 值 translate 50px,100px 把元素從左側移動...

CSS3 總結(二十) 彈性盒子(CSS3)

2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...