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	定义元素在不面对屏幕时是否可见。