# 前言
曾经简单的交互都需使用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~1rotateX(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 {
