transform變換

transform變換

transform字面上就是變形，改變的意思。

旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

移動元素自身的50%:

transform:transfrom(-50%，-50%)        //兩個參數分別表明該元素的50%高和50%寬

順時針旋轉：

 transform:rotate(0deg);        //會以順時針旋轉，注意此處單位爲deg

傾斜 X和Y軸的傾斜角度：

transform:skew(0deg,0deg)        //兩個參數分別表明爲x軸和y軸
以x軸作3D旋轉：

-webkit-transform: rotateX(120deg);
以y軸作3D旋轉：

-webkit-transform: rotateY(130deg);
定位中心點：

transform-origin:50%,50%;         //分別表明x軸和y軸

3D 轉換屬性

 

屬性	描述
transform	向元素應用 2D 或 3D 轉換。
transform-origin	容許你改變被轉換元素的位置。
transform-style	規定被嵌套元素如何在 3D 空間中顯示。
perspective	規定 3D 元素的透視效果。
perspective-origin	規定 3D 元素的底部位置。
backface-visibility	定義元素在不面對屏幕時是否可見。