共有如下2d轉換方法：
語法：translate(xpx,ypx)，即把元素從左向右移動 x 個畫素，從上向下移動 y 個畫素。
例：transform: translate(50px,100px);
則元素從左側移動 50 畫素，從頂端移動 100 畫素。
語法：rotate(xdeg)，如果 x 為正值，則把元素順時針旋轉 x 度，如果 x 為負值，則把元素逆時針旋轉 x 度。
例：transform: rotate(30deg);
則元素順時針旋轉 30 度。
語法：scale(x,y)，即把寬度轉換為原始尺寸的 x 倍，把高度轉換為原始高度的 y 倍。
例：transform: scale(2,4);
寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
語法：skew(xdeg,ydeg) ，即把元素圍繞 x 軸把元素翻轉 x 度，圍繞 y 軸翻轉 y 度。
例：transform: skew(30deg,20deg);
圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度。
matrix() 方法把所有 2d 轉換方法組合在一起。
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
語法：rotatex(xdeg);即沿著 x 軸向裡翻轉 x 度
例：
這是乙個 div 元素
這是乙個旋轉後的 div 元素
rotatey()，rotatez()和rotatex()一樣，只不過是沿y軸旋轉（這裡的y軸是向下的）語法：rotate3d(x,y,z,angle)
元素旋轉的角度由rotate3d()函式的第四個引數來決定，它是乙個值。rotate3d()函式的前三個引數用於決定各個軸的旋轉方向。正值表示順時針旋轉，負值表示逆時針旋轉。
transform: rotate3d(1, 0, 0, 45deg); /* 繞x軸順時針旋轉45度 */
transform: rotate3d(0, 1, 0, 45deg); /* 繞y軸順時針旋轉45度 */
transform: rotate3d(0, 0, 1, 45deg); /* 繞z軸順時針旋轉45度 */
transform: rotate3d(0, 0, 0, 50deg); /* 不會發生旋轉 */
scalex(x)，沿x軸變成之前的x倍；
scaley(y)，沿y軸變成之前的y倍；
scalez(z)，沿z軸變成之前的z倍；
scale3d(x,y,z)，當scale3d()中x和y值同時為1，即scale3d(1,1,z)，其效果等同於scalez(z)。
CSS3中的變形處理 transform 屬性
在css3中，可以利用transform功能來實現文字或影象的旋轉 扭曲 縮放 位移 矩陣 原點 這六種型別的變形處理，下面將詳細講解transform的使用。變形 旋轉 rotate div.box 順時針旋轉45度 變形 扭曲 skew div.box 通過skew 函式將長方形變成平行四邊形。...
關於css中的align content屬性詳解
align content 作用 會設定自由盒內部各個專案在垂直方向排列方式。條件 必須對父元素設定自由盒屬性display flex 並且設定排列方式為橫向排列flex direction row 並且設定換行，flex wrap wrap 這樣這個屬性的設定才會起作用。設定物件 這個屬性是對她容...
css3中的變形（transform）
transform 字面上的意思就是 使改變外觀 改變形態 在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 scale 4.移動 translate 語法transform none transform rotate skew scale tra...