CSS transform 2D 与 3D 转换
该文主要讲解了围绕transform属性展开的2D转换,3D转换等一系列相关属性的用法及注意事项。
1、transform 属性
在 CSS 中,利用
transform
这个属性实现对元素进行旋转,缩放,倾斜或平移;
transform 属性的值可以是 none 或一个或多个 css 变换函数;
transform 的值不是 none 时,元素会创建自己的层叠上下文。
1.1、transform 的 2D 变换函数
属性值 | 描述 | 实例 |
---|---|---|
translate(x,y) | x,y 为长度单位,可以是 px,也可以是百分比%, x 表示元素在 x 轴上的移动量 y 表示元素在 y 轴上的移动量,如果 y 值不写,则默认为 0,例如 translate(10px)表示 translate(10px,0) | transform:translate(100px,200px) |
translateX(x) | x 为长度单位,可以是 px,也可以是百分比% 表示元素在平面 x 轴上的位移量 | transform:translateX(300px) |
translateY(y) | y 为长度单位,可以是 px,也可以是百分比% 表示元素在平面 Y 轴上的位移量 | transform:translateY(200px) |
rotate(ax) | ax 代表旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转 | transform:rotate(30deg) |
scaleX(x) | x 数字类型,表示元素在 x 轴上的缩放比 | transform:scaleX(2) |
scaleY(y) | y 数字类型,表示元素在 y 轴上的缩放比 | transform:scaleY(2) |
scale(x,y) | x 数字类型,表示元素在 x 轴上的缩放比 y 数字类型,表示元素在 y 轴上的缩放比 当只有 x,没有 y 时,则 y 默认为 x,元素在 x,y 轴上均匀缩放 | transform:scale(2,3) |
skew(ax,ay) | ax 表示一个角度,表示沿着 x 横坐标扭曲元素的角度 ay 表示一个角度,表示沿着 y 纵坐标扭曲元素的角度 | transform:skew(30deg,30deg) |
skewX(ax) | ax 表示一个角度,表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果 | transform:skewX(30deg) |
skewY(ay) | ay 表示一个角度,表示沿着 y 纵坐标扭曲元素的角度,形成垂直拉伸效果 | transform:skewY(30deg) |
1.2、transform 的 3D 转换属性值
属性值 | 描述 | 实例 |
---|---|---|
translateZ(z) | z 为 px 长度单位 元素在 3D 空间 z 轴方向上的位移量 | transform:translateZ(200px) |
translate3d(x,y,z) | x,y,z 分别为 px 长度单位, x 表示元素在 x 轴坐标上的位移量, y 表示元素在 y 轴坐标上的位移量,z 表示元素在 z 轴坐标上的位移量,该值不能使用百分比,如果使用会被认为是无效属性 | transform:translate3d(50px,30px ,50px) |
rotateX(ax) | 表示元素绕X 轴旋转一定的角度 ax 表示度数,可以为正,也可以为负 |
transform:rotateX(30deg); |
rotateY(ay) | 表示元素绕Y 轴旋转一定的角度 ay 表示度数,可以为正,也可以为负 |
transform:rotateY(30deg) |
rotateZ(az) | 表示元素绕Z 轴旋转一定的角度 ax 表示度数,可以为正,也可以为负 |
transform:rotate(30deg); |
2、2D 转换
注意:
- 元素的左上角坐标为 (0,0);
- (0,0)坐标的右方,为 x 轴的正方向;
- (0,0)坐标的下方,为 y 轴的正方向。
2.1、translate 位移
css 中通过给
transform
添加translate(x,y)
或translateX(x)
或translateY(y)
来实现元素的水平或垂直位移。
属性值 | 描述 | 举例 |
---|---|---|
translate(x,y) | 实现元素水平和垂直位移量 | translate(30px,50px) |
translateX(x) | 实现元素水平位移量 | translateX(30px) |
translateY(y) | 实现元素垂直位移量 | translateY(50px) |
2.1.1、translate(x,y)
x 和 y 是长度值 length,可以是 px,也可以是%百分比;
x 表示元素在 x 轴上的位移量,为正表示向右移动,为负表示向左移动;
y 表示元素在 y 轴上的位移量,为正表示向下移动,为负表示向上移动;
位移和相对定位非常像,位移变形也会 “老家留坑”,即会占据原来的位置;
同时不会对其它元素造成影响,相当于悬浮在其它元素上面。
/* x,y 为px长度单位 */
transform: translate(50px, 50px); /* 元素水平向右移动50px,向下移动50px */
/* x,y 为%百分比 */
/* 在标准盒子模型下:
水平位移 =(width + 左右 padding + 左右 border) * x%
垂直位移 =(height + 上下 padding + 上下 border) * y%
*/
transform: translate(50%, 50%);
/* y 值不写,默认为0:
transform:translate(10px) 等同于 transform:translate(10px,0)
只有x发生位移,y轴上不发生移动
*/
transform: translate(10px);