Better

最近的工作涉及到图形变换会比较多，不过都是基于具体 2D 和 3D 场景的，但其实 CSS 就自带类似的变换功能，且同样支持 3D 场景，回忆小小总结下

理解几个 CSS 动画中比较复杂的属性

• matrix
• skew
• origin
• perspective

matrix 矩阵

• 前言：实践 2d，3d 中 canvas 图形变换后，发现 CSS 中早就定义好了，是之前自己不关注！！！
• CSS3 中的矩阵指的是一个方法，书写为 matrix() 和 matrix3d()，前者表示元素 2D 平面的变换，是 3x3 的矩阵，后者则是 3D 变换，是 4x4 的矩阵
• matrix 共有 6 个参数，matrix(a, b, c, d, e, f)，在矩阵中书写方向是竖的（最后一行自行补为 0 0 1），矩阵相乘是 横列*竖列 规则。CSS 的 matrix 是一个简写的齐次矩阵，因为它省略了 3 阶齐次矩阵第三行的 0, 0, 1 值，所以它 只有 6 个值。
• matrix3d 共有 16 个参数（无需手动补充），书写规则和 matrix 一样

rotate：旋转操作

• 这个属性本身很好理解，表示顺时针选择多少角度，但从 matrix 角度而言 rotate 会比 translate 和 scale 来的复杂，因此重点学习一下
• 旋转设计到三角函数，可自行推导，矩阵表示为 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)，具体记忆简写为 CS-SC 对称结构帮助理解

skew：扭曲操作

• matrix：matrix(1, tan(θy), tan(θx), 1, 0, 0)
• skewX：表示 X 方向的扭曲，达到这个目的的方式是逆时针旋转 Y 轴，y 方向值保持不变
• skewY：表示 Y 方向的扭曲，达到这个目的的方式是顺时针旋转 X 轴，x 方向值保持不变

origin：表示原点

• 在 transform 中，origin 默认在元素的中心，也就是 50% 50% 0
• 取值可以为：length、percent，以及 top、left、right、bottom、center 关键字

问题：既然提供了便于理解的 rotate、skew、translate，为何还要提供 matrix 呢：对于简单的交互，使用提供的方法足够了，但对于一些高级效果，还是需要 matrix 来帮忙

而且通过 matrix 还能达到性能优化的目的，我们可以对 CSS 的 transform 属性进行压缩。比如如下 CSS

div.block {
  transform: rotate(30deg) translate(100px,50px) scale(1.5);
}

我们可以对上面映射合成为一个 matrix 的表现形式如下

div.block { transform: matrix(1.3,0.75,-0.75,1.3,61.6,93.3)；}

难懂的 perspective 属性

• 可选的属性值
  • number：元素具体视图的距离
  • none（默认值，与 0 相同，不设置透视）
• CSS3 3D transform 的透视点是在浏览器的前方
• 可通过给父元素设置 perspective，以及子元素设置 translateZ 观察近大远小的效果
• 两种书写形式
  • 用在动画元素们的共同父辈元素上，此时也叫做舞台元素
  • 用在当前动画元素上，此时需要与 transform 的其他属性写在一起
  • 如果舞台只有一个元素，则两种写法效果一致，如果有多个元素，则差异就会表现出来，第二种写法每个元素都有自己的视点

其他属性

• perspective-origin：lookAt 的位置，默认在看舞台或元素中心
• transform-style：preserve-3d|flat
  • flat：表示平面，默认值
  • preserve-3d：表示 3d 透视，实现一些 3D 效果的时候，通常需要设置该值
• backface-visibility
  • CSS3 的 3D 世界中，默认情况下可以看到背后的元素
  • 为了切合实际，通常会设置 hidden 使后面值不可见