文章目录
属性 | 说明 | 版本 |
---|---|---|
transform | 适用于2D或3D转换的元素 | CSS3 |
transform-origin | 允许您更改转化元素位置 | CSS3 |
transform-style | 3D空间中的指定如何嵌套元素 | CSS3 |
perspective | 指定3D元素是如何查看透视图 | CSS3 |
perspective-origin | 指定3D元素底部位置 | CSS3 |
backface-visibility | 元素背面是否可见 | CSS3 |
transform
transform 属性应用于元素的2D或3D转换。可以将元素旋转,缩放,移动,倾斜等。
浏览器支持:
语法:包含下面一个或多个值,以空格隔开,顺序不同效果可能不同。
值 | 描述 |
---|---|
none |
定义不进行转换。 |
matrix(n,n,n,n,n,n) |
定义 2D 转换,使用6个值的矩阵。 |
matrix3d(n,n,n,...) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) |
定义 2D 平移转换。 |
translate3d(x,y,z) |
定义 3D 平移转换。 |
translateX(x) |
定义平移转换,只是用 X 轴的值。 |
translateY(y) |
定义平移转换,只是用 Y 轴的值。 |
translateZ(z) |
定义 3D 平移转换,只是用 Z 轴的值。 |
scale(x[,y]?) |
定义 2D 缩放转换。 |
scale3d(x,y,z) |
定义 3D 缩放转换。 |
scaleX(x) |
通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) |
通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) |
通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) |
定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
rotateX(angle) |
定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) |
定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) |
定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) |
定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) |
定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) |
定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) |
为 3D 转换元素定义透视视图。 |
transform:rotate(30deg);
transform:scale(2,2);
transform:rotate(30deg) scale(2,2);
transform:rotate(30deg) scale(2,2) translate(50px,-20px);
兼容低版本浏览器(添加浏览器内核前缀):
div{
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg); /*无前缀的始终在后面写*/
}
1.矩阵
matrix(a,b,c,d,e,f)
定义 2D 转换,使用6个值的矩阵。
a
水平缩放,默认值1。
b
水平倾斜,默认值0。
c
垂直倾斜,默认值0。
d
垂直缩放,默认值1。
e
水平移动,默认值0。
f
垂直移动,默认值0。
2D变化中的平移,缩放,旋转,倾斜本质上都是应用的matrix()方法实现的:
转换类型 | 等效的matrix() |
---|---|
translate(x, y) | matrix(1, 0, 0, 1, x, y) |
scale(x, y) | matrix(x, 0, 0, y, 0, 0) |
rotate(a) | matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0) |
skew(a, b) | matrix(1, tan(b), tan(a), 1, 0, 0) |
transform: translate(30px,50px);
transform: