2 变换 transform
2.1 变换相关 CSS 属性
CSS 属性名 | 含义 | 值 |
---|---|---|
transform | 设置变换方法 | 各种2D或3D的变化方法 |
transform-origin | 设置变换原点 对于2D和3D变换都有效果 | 使用关键字或者长度表示的坐标位置 |
transform-style | 设置子元素在平面空间还是3D空间 | flat: 子元素在平面空间。 perserve-3d: 子元素在3D空间。 |
perspective | 设置景深,需要设置给变换元素的父元素 | 长度 |
perspective-origin | 设置观察者位置,用于3D变换 | 使用关键字或者长度表示的坐标位置 |
backface-visibility | 设置3D变换的元素背面面向用户时是否可见。 设置给变换的元素 | visible: 可见,默认值。 hidden: 隐藏。 |
关于设置变换效果的注意事项:
- 可以给一个元素设置多个变换效果,transform 属性指定多个变换方法即可,用空格隔开。
- 行内元素设置变换效果不会生效。
关于设置3D变换的注意事项:
- 3D变换效果生效的前提:必须给变换元素的父元素设置
transform-style:preserve-3d;
和perspective
两个属性- perspective 表示景深,透视距离(观察者与平面的距离),该值对3D效果影响很大。
- transform-style、perspective、perspective-origin 需要设置给父元素; transform、transform-orogin、backface-visibility 需要设置给变换的元素本身。
2.2 2D 变换的方法
① 位移 translate 方法
translateX() 水平方向位移
translateY() 垂直方向位置
translate() 同时设置垂直和水平方向位移
总结:
- 指定长度作为位移的距离,正值向右向下位移;负值向左向上位置。
- 用百分比作为位移长度,水平位置参照元素自身的宽度,垂直方向位置参照元素自身高度。
- translate() 如果只指定一个值,认为只设置水平位置,没有设置垂直方向位置。
② 缩放 scale 方法
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 同时设置水平方向和垂直方向的缩放
总结:
- 指定数字作为缩放方法的值,没有单位,表示缩放的倍数(比例)。
- scale() 如果两个值就是分别设置水平和垂直缩放,如果只有一个值表示同时设置两个方向的缩放。
③ 旋转 rotate 方法
rotate() 设置旋转的角度
总结: 指定角度作为 rotate 的值,角度的单位是 deg。
2.3 3D 变换的方法
① 3D 位移
translateZ()
translate3D()
② 3D 缩放
scaleZ()
scale3D()
③ 3D 旋转
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转,等同于 rotate()
rotate3D() 同时设置三个轴的旋转角度
transform: rotate3D(1, 1, 1, 30deg);