# 前言

曾经简单的交互都需使用JS才能完成，经历过jQuery时代的同学应该很清楚，使用原生JS写交互很艰难，但是使用jQuery封装好的交互函数那就很简单了。

如今CSS3增加了transform、transition和animation三大交互属性，为CSS的单调性增加了很多趣味，也为交互开发增加了新的可能。

# 变换

变换分为2D变换和3D变换。2D变换在平面上操作，3D变换在空间上操作，2D和3D的概念相信很多同学都会了吧。变换可理解成将节点复制一份并生成新的图层，原节点隐藏，使用新节点进行变换操作。

声明transform-style可实现2D变换和3D变换间的切换，不同变换空间需使用对应的变换函数。当然transform-style需声明在父节点中，即需发生变换的节点的父节点。

• flat：所有变换效果在平面上呈现(默认)
• preserve-3d：所有变换效果在空间上呈现

笔者已将2D变换函数和3D变换函数整理好，在不同变换空间使用对应的变换函数即可。

• translate()：位移
  • translate(x,y)：2D位移
  • translate3d(x,y,z)：3D位移
  • translateX(x)：X轴位移，等同于translate(x,0)或translate3d(x,0,0)
  • translateY(y)：Y轴位移，等同于translate(0,y)或- translate3d(0,y,0)
  • translateZ(z)：Z轴位移，等同于translate3d(0,0,z)
  • 描述
    • 单位：Length长度，可用任何长度单位，允许负值
    • 默认：XYZ轴不声明默认是0
    • 正值：沿X轴向右位移/沿Y轴向上位移/沿Z轴向外位移
    • 负值：沿X轴向左位移/沿Y轴向下位移/沿Z轴向内位移
• scale()：缩放
  • scale(x,y)：2D缩放
  • scale3d(x,y,z)：3D缩放
  • scaleX(x)：X轴缩放，等同于scale(x,1)或scale3d(x,1,1)
  • scaleY(y)：Y轴缩放，等同于scale(1,y)或scale3d(1,y,1)
  • 描述
  • 单位：Number数值或Percentage百分比，允许负值
  • 默认：XYZ轴不声明默认是1或100%
  • 正值：0<(x,y,z)<1沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)>1沿X轴放大/沿Y轴放大/沿Z轴变薄
  • 负值：-1<(x,y,z)<0翻转沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)<-1翻转沿X轴放大/沿Y轴放大/沿Z轴变薄
• skew()：扭曲
  • skew(x,y)：2D扭曲
  • skewX(x)：X轴扭曲，等同于skew(x,0)
  • skewY(y)：Y轴扭曲，等同于skew(0,y)
  • 描述
    • 单位：Angle角度或Turn周
    • 默认：XY轴不声明默认是0
    • 正值：沿X轴向左扭曲/沿Y轴向下扭曲
    • 负值：沿X轴向右扭曲/沿Y轴向上扭曲
• rotate()：旋转
  • rotate()：2D旋转
  • rotate3d(x,y,z,a)：3D旋转，[x,y,z]是一个向量，数值都是0~1
  • rotateX(a)：X轴旋转，等同于rotate(1,0,0,a)，正值时沿X轴向上逆时针旋转，负值时沿X轴向下顺时针旋转
  • rotateY(a)：3D Y轴旋转，等同于rotate(0,1,0,a)，正值时沿Y轴向右逆时针旋转，负值时沿Y轴向左顺时针旋转
  • rotateZ(a)：3D Z轴旋转，等同于rotate(0,0,1,a)，正值时沿Z轴顺时针旋转，负值时沿Z轴逆时针旋转
  • 描述
    • 单位：Angle角度或Turn周
    • 正值：2D旋转时顺时针旋转
    • 负值：2D旋转时逆时针旋转
• matrix()：矩阵(太过复杂，可放弃)
  • matrix(a,b,c,d,e,f)：2D矩阵(位移、缩放、扭曲、旋转的综合函数)
  • matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)：3D矩阵(位移、缩放、扭曲、旋转的综合函数)
• perspective()：视距
  • Length：长度，可用任何长度单位

transform的使用场景很多，不局限于某种特定场景，若结合transition和animation使用还必须注意性能问题。

多值执行顺序

与backgound和mask一致可声明多重效果，使用逗号隔开。网上很多结论说transform多值执行顺序是从左到右或从右到左，其实这样的结论都是比较笼统的。正确来说并无执行上的先后顺序, 而是由多个变换对应的矩阵相乘, 再拿该矩阵去乘以坐标，最终得出变换效果。

例如transform:translate(150px,0),rotate(45deg)和transform:rotate(45deg),translate(150px,0)，最终的变换效果就有所不同。

• 第一种：先往右位移150px，坐标轴不变；再顺时针旋转45deg，坐标轴顺时针旋转45deg
• 第二种：先顺时针旋转45deg，坐标轴顺时针旋转45deg；再往右位移150px，坐标轴不变

.elem {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: #f66;
    font-size: 20px;
    color: #fff;
    &.transform-1 {