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