css3學習總結7 CSS3 2D轉換

通過 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 反轉橫向排列 ...