hello，大家好，我是zhengyaing。
今天的cheatsheet系列给大家介绍一下css中的变形transform，还是老规矩，整个课程总结成了一张cheatsheet，下载地址是：Zhengyaing，视频教学：B站：Cheat Sheet】【12】一张图掌握CSS 变形（理论+实践）
因为前段时间停更了一段时间，近期会加速把把CSS的剩余模块都讲完。视频请转移至B站观看，这次还新增了实践模块！目前CheatSheet系列已经更新到了第12篇，欢迎大家去gayhub，给个star：前端CheatSheet
今天要讲的是变形模块，如果你熟悉定位，你知道，我们可以通过各种方法来定位对象的位置，但是我们能做的只是改变的位置。利用CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。
坐标系
在开始学习具体的属性使用方法之前，我们先来理解一下坐标系
首先是笛卡尔坐标系，通过两个数字、三个数字表示空间中的一个位置，在CSS中，这个坐标系的三个轴分别称为横轴、纵轴、深度轴。x轴指向右侧，y轴指向下方，注意跟平时使用的相反，我们可以通过top属性的正负来理解y轴的方向。而z轴则是表示从显示器“跃出”的距离，类似于z-index。
第二种坐标系就是球坐标系。用于描述3D空间中的角度。
下面我们开始正式讲讲“变形”：“transform”，transform其实是一个属性，同时有几个辅助控制变形的属性。先来看最主要的属性：Transform，他的值可以是一个transform函数的list或者none。 变形的元素有自己的上下文，经过变形后的元素所占空间可能与之前的不一样，但是他在页面所占的空间保持不变。
transform的值的顺序很重要，如果顺序变了，结果会大不同。
另外要注意的一点是，变形通常不会叠加。也就是说，如果改变了元素的形态，而后再想添加一种变形，那么需要在原来变形的基础上修改。当然动画变形是一种例外。
transform
下面我们来介绍介绍transfrom函数。一共有下面这21种变形函数，transform属性的值是由空格分隔的一个或多个函数，各函数从头至尾依次处理，而且每个函数都需要有效，否则整个属性将不发生作用。
平移函数
指沿一个轴或者多个轴移动。
translateX（）和translate Y（）常被称为“2D”平移函数，因为他们只能在页面中移动元素不能沿着Z轴前后移动元素。这两个函数都可以接收一个距离值，可以是长度，也可以是百分数，如果是百分数，移动距离相对元素自身的尺寸计算。translate（）是translateX和translateY的缩写，如果省略y值，假定为0
translateZ（）只接收长度值，不接受百分数，任何有关Z轴的值都不可以使用百分数。同样translate3d（）是xyz的缩写，但是要注意的是，与translate（）不同的是，translate3的（）没有假定值，因此需要注意，少写值会导致无效。
缩放函数
缩放变形把元素放大或者缩小，具体取决于提供的值。缩放函数的值都是无单位的实数，二是始终为正数。scaleX和scaleY分别缩放两个坐标轴方向，scale则为缩写scale（2）则会同时将宽度和高度放大两倍。
同时scaleZ可以在纵轴方向上缩放，但是前提为元素有深度，比如元素绕x或者y轴旋转，scale3d的（）为三者缩写，和translate3d一样，需要三个数字都有效。
旋转函数
旋转函数绕某个轴或者3D空间某个向量旋转元素。rotate X，rotate Y，rotateZ，rotate都只接收一个值，即角度。rotate（）实施的是2D旋转，作用等同于rotateZ（），因为都是绕Z轴旋转。
!
想要在3D空间旋转元素，可以使用rotate3d（），前三个值制定3D空间中向量的x，y，和z分量，第四个值是角度值，制定绕向量旋转的量。
倾斜函数
沿着x轴和y轴倾斜元素，不能沿着z轴或者3D空间中的向量倾斜。
skew（a）假定y轴的倾斜角度为0.
视域函数
视域为元素赋予前后深度，这种深度可以通过perspective来设定，可以将他想象成一个摄像头，具体物体的远近不同，而显示出不同的3D角度。
视域值必须为证。perspective函数在变形函数列表中的位置十分重要。放在首位，至少应该放在依赖视域的变形之前。
其他变形属性
几个辅助属性，用于定义变形的原点、“场景”使用的视域。
移动原点。
两个或者三个关键字，用于定义相对于哪个点变形；横轴和纵轴可以使用英文关键字top，right等。也可以是长度值，百分数等。
其中平移函数不会收到原点到定位影响。
选择3D变形方式
默认情况下，不管怎样变形，得到的结果都是扁平的，可以使用transform-style属性来修改。
修改视域
定义视域，相当于之前讨论过的perspective（）函数，属性值为一个长度，定义视域锥体的深度，但是perspective属性是将定义的视域深度应用的目标元素的所有子元素上。多数时候，应该使用perspective属性，
移动视域的原点
定义视线汇聚于哪一点
处理背面
在使用3D变形过程中，我们可能会看到元素的背面，使用backface-visibility决定元素的背面朝向我们的生活是否渲染背面，仅此而已。
举两个🌰
代码部分还是看B站视频吧
