CSS3动画之2D3D转换

浏览器坐标系

• x 轴：左 → 右
• y 轴：上 → 下
• z 轴：里 → 外

transfrom 的特点

• 不会脱离文档流，即不会影响页面的布局
• 可以优化动画的性能
• 默认以元素自身的中心位置为原点

transfrom 的属性值

transfrom 应用于元素的 2D / 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

平移 translate

• translate(x, y) / (x)：x、y 分别控制元素在 x、y 轴上的平移
• translateY()：在 Y 轴上平移
• translateX()：在 X 轴上平移
• translateZ()：在 Z 轴上平移
• 单位：px、% (相对于自己而言)

旋转 rotate

• rotate() / rotateZ() → Z 轴
• rotateX() → X 轴
• rotateY() → Y 轴
• 单位：deg (度数)

缩放 scale

"""
scale(x, y)/(x & y);x，y 分别控制元素宽度、高度的倍数

小于 1 缩小；大于 1 放大 (元素里面的内容也会跟着变化)
负数-镜像倒置，相当于绕 Z 轴旋转了180度

"""

倾斜 skew

• skew(x, y) / (x)：x、y 分别控制元素绕 x、y 轴翻转的度数
• skewX()
• skewY()
• 单位：deg

transfrom 复合写法注意事项

• 元素的 X、Y 轴的方向是根据元素确定的，所以旋转后 x、y 轴的方向会改变
• 渲染顺序符合队列 → 即先写先生效，后写后生效
• eg：transform: rotate(30deg) rotateX(30deg) rotateY(30deg);

transform-origin

• 用于设置原点的位置，能影响元素的旋转、缩放、倾斜
• 该属性必须和 transform 属性一起使用

transform-origin: 0 0; /* 设置圆心位置 */
transform-origin: center;

• x y：设置原点所在的 x、y 轴的位置（单位：px)
• left、right、bottom、top、center 中的 1~2 个
  • left top → 0% 0% → 元素的左上角
  • right bottom → 100% 100% → 元素的右下角
• 默认是 center → 50% 50% → 元素的中间

position: relative & transfrom

• 相同点：都不会脱离文档，即不会影响页面的布局
• 差别：transform 可以优化动画的性能

position 会引起网页的重排，transform 只会引起网页的重绘

3D效果的实现

perspective

• 即视距，也叫景深；就是我们离显示器的距离，数值越大，离我们越远
• 给父级标签设置景深，这时这个父级元素叫做 “舞台元素”，我们相当于站到父级元素上看他的子元素，会有 “近大远小” 的视觉效果
• 默认值是 none，即没有 3D 视觉效果
• 如果他的子元素也设置了 perspective，视觉效果会叠加

perspective-origin

• 定义 3D 元素所基于的 X 轴和 Y 轴
• 当为元素定义 perspective-origin 属性时，其子元素会获得透视效果
• 注意：使用此属性必须先使用 perspective 属性，而且只影响 3D 转换元素

transform-style

• 给父级元素设置 transform-style: preserve-3d; 表示将子元素呈现在三维空间中，这时该元素叫 “容器”
• 默认值是 flat，表示将子元素呈现在二维空间中
• 注意：使用此属性必须先使用 transform 属性