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