transform
语法
transform:none | transform-functions
浏览器支持
英文的意思:“变换”,“改变”,“转变”
IE10,Firefox,Opera支持transform属性
IE9支持-ms-transform属性,2D转化
Safari和Chrome支持-webkit-transform属性,2D转化,3D转化
Opera支持2D转化
用法
transform属性向元素应用2d和3转换,对元素进行旋转、缩放、移动、倾斜
| 值 | 描述 |
|---|---|
| none | 不进行转换 |
| rotate(angle) | 2d旋转,参数规定角度 |
| rotate3d(x,y,z,angle) | 3d旋转 |
| rotateX(angle) | 沿着X轴的3d旋转 |
| rotateY(angle) | 沿着Y轴的3d旋转 |
| rotateZ(angle) | 沿着Z轴的3d旋转 |
| translate(x,y) | 2D移动 |
| translate3d(x,y,z) | 3D移动 |
| translateX(x) | X轴的移动 |
| translateY(x) | Y轴的移动 |
| translateZ(x) | Z轴的移动 |
| scale(x,y) | 2D缩放 |
| scale3d(x,y,z) | 3D缩放 |
| scaleX(x) | X轴的3D缩放 |
| scaleZ(y) | Y轴的3D缩放 |
| scaleY(z) | Z轴的3D缩放 |
| skew(x-angle,y-angle) | 定义沿着x轴和y轴的2d倾斜转换 |
| skewX(angle) | 定义沿着x轴的2d倾斜转换 |
| skewY(angle) | 定义沿着y轴的2d倾斜转换 |
| matrix(n,n,n,n,n,n) | 使用六个值的矩阵定义2d转换 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,) | 使用十六个值的矩阵定义3d转换 |
| perspective | 3d转换元素定义透视图 |