CSS变形
CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。
概念介绍
- 变形元素：进行transform3D变形的元素，主要是transform、transform-origin、backface-visibility设置
- 被透视元素：被观察者观察的元素，一般是变形元素的父级元素，主要是perspective、perspective-origin设置
涉及到的属性主要是：
- transform
- 变形配置
- transform-origin
- transform-origin是变形原点，默认中心点就是元素的正中心，通过该属性改变元素在XYZ轴的中心点
- transform-style
- 变形风格，允许变形元素及其子元素在3D空间中呈现。有两个值flat默认是表示2D平面，perspective-3d表示3D空间。当设置了overflow非visible或clip非auto时，transform-style：perspective-3d失效。
- perspective
- 设置透视距离，指观察者沿着平行于Z轴的视线到屏幕之间的距离，简称视距。值远大，表示距离越远，看来就越小。设置透视perspective属性的元素就是透视元素。一般该属性只能设置在变形元素的父级元素上，因为浏览器会为其子元素的变形产生透视效果，但不会为其自身产生透视效果。设置在变形元素上无效。
- perspective-origin
- 设置透视原点，观察者的位置。两个值，分别是X轴距离原点的偏移量和Y轴原点的偏移量，可以用关键字left、right和center表示，也可以ongoing数值和百分比表示，当用单个关键字表示时，另一个表示默认center。这个属性必须定义在设置perspective的元素上,基点默认值是50% 50%即center
- backface-visibility
- 设置背面不可见,visible和hidden。如果一个元素覆盖在另一个元素上，不仅仅正面覆盖，背面也是覆盖的
2D变形
- translate平移 : transform: translate(0, 100px);
- translate(x,y)
- translateX(x)
- translateY(y)
- scale 缩放
- scale():第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值.scale还能设负数，负数会先将元素反转再缩放
- scaleX():指定对象X轴的（水平方向）缩放
- scaleY():指定对象Y轴的（垂直方向）缩放
- rotate 旋转,旋转函数绕某个轴或者3D空间某个向量旋转。rotate X，rotate Y，rotateZ，rotate都只接收一个值。
- rotateX
- rotateY
- rotateZ
- rotate = rotateY
- skew倾斜。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- skew
- skewX
- skewY
- matrix 变换矩阵
3D变形
上面元素的平移、旋转、缩放和倾斜等功能。这些效果只是单纯在二维平面图上的，我们称之为 2D。在2D平面基础上多出一个z轴，称之为三维立体。
变形配置
- rotateX()
- rotateY()
- rotateZ()
- rotate3d（X，Y，Z，Ndeg）
- 变形元素沿着（0,0,0）和（X,Y,Z）这两个点构成的直线为轴，进行旋转Ndeg。
- 透视函数perspective（）
- 是transform变形函数的一个属性值，应用于变形元素本身，参数只能是长度值，并且只能是正数。例如perspective（100px）
- translate3d(tx,ty,tz)，其中tz的Z轴长度只能为px值，不能为%百分比
- translateZ
- scale3d(x,y,z)
- scaleZ() 仅当元素有深度时，这两个函数才有效果
- matrix3d() 3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d
