课程名称：前端工程师2022版
课程章节：2D与3D转换
课程讲师： elex
课程内容：
变形：CSS3新增特性
2D变形：
旋转变形、缩放变形、斜切变形、位移变形
3D变形：
3D旋转、空间移动
2-1 旋转变形
transform:rotate()
旋转角度：deg
角度正的，顺时针；角度负的。逆时针
transform-origin：设置属于自己的自定义变形原点
语法：
transform-origin: x-axis y-axis z-axis;
属性值有：left、right、center、length、%
transform-origin：上下 左右;
例子：
transform-origin：0 0；
transform：rotate(45deg)
以左上角为中心点进行旋转
这两个结合使用，可以自定义图片旋转时选择的中心点s
使用transform-origin属性时，必须和transform属性一起使用
默认值：transform-origin：50% 50% 0；元素的正中心点
该元素无法继承
2-4 缩放变形
transform:scale()
transform：scale(缩放倍数)
括号里面的数值＞1，放大该元素到对应的倍数；＜1，缩小该元素到对应的倍数
例子：
transform：scale（3）
将该元素放大三倍
同时记得注意，元素的缩放也是按照元素的中心点进行缩放的
可以结合之前讲的"transform-origin"一起使用
transform: scale(sx,sy) 中，sx表示宽度缩放为原元素的sx倍，sy表示高度缩放为原元素的sy倍。
transform: scale(x）只设置一个值的时候，表示宽度和高度都缩放为原来的x倍。
2-7 斜切变形
transform：skew()
skew(x斜切角度，y斜切角度) 单位deg
transform: skew(<angle> [, <angle>]) （备注：中括号包裹的参数表示可选参数）
其中angle为倾斜角度，角度方向跟随极坐标角度方向，
逆时针为正方向，顺时针为负方向。
当只有一个参数的时候，第二个参数默认为0deg
2-9 位移变形
transform：translate()
translate：翻译、移动
translate(向右移动，向下移动) 单位px
有点类似于相对定位，也有"老家留坑,形影分离"的问题
任何元素都可以设置位移变形
也可以用于微调元素位置，但兼容性不如相对定位
translate(x, y)中，第一个参数表示水平方向移动，第二个参数表示垂直方向移动
其中X轴的正方向为从左向右，Y轴的正方向为从上到下
2-11 3D变形
最常见的3D变相就是3D旋转
将transform的属性值设置为rotateX()或者rotateY()来实现绕轴旋转
rotate默认是按照Z轴旋转的
例子：
transform：rotateX(30deg);transform:rotateY(30deg)
或者复合在一起写：transform：rotateX(30deg) rotateY(30deg);
正方向:向后
perspective:用于定义透视的强度 可以看作是“人眼到舞台的距离” 单位：px
可以凭主观进行设定，数值随意
注意：
<div> =="舞台" 必须设置perspective属性
<p></p> =="演员" 必须设置transform属性
</div>
这种3D旋转的的效果，舞台必须有perspective属性，演员必须有transform属性。否则单独给演员设置transform属性时是不生效的
//2D 可以对元素进行移动、缩放、转动、拉长或拉伸，
3D允许对元素进行格式化，在三维空间进行操作。元素改变形状，尺寸和位置，
3D除了增添了少许2D没有的属性外，其他基本上是细化了2D的属性。
当使用2D效果的时候，rotate()只有一个参数；使用3D的时候也可以直接记忆rotate3d();其中前三个参数表示X，Y，Z的坐标轴可以在0-1范围内参数为数值型；第四个为旋转的角度；
2-12 空间移动
前提条件：
当元素进行了3D旋转后，可以继续添加"translateX()、translateY()、translateZ()属性让元素在空间内进行移动
先变形transform=rotate(旋转了)，在进行transform=translate移动
例子：
transform：rotateX(30deg) translateX(100px) translateY(100px)；
此时该元素在绕x轴旋转30deg之后，再在X轴上右移动100px，y轴上向下移动100px
这种情况不同于相对定位的位置设置
例子：
制作一个正方体
六个面都在"舞台"经过不同的3D旋转空间移动，形成视觉上的正方体
这几个面都利用绝对定位来堆叠到舞台上的
2-15 平移、旋转的正方向总结
3-1 课程总结
重点内容：
1.2D变形和3D变形有哪些，参数以及正方向？
2D变形：
旋转变形transform：rotate
单位deg 正方向：顺时针
缩放变形transform'skew
参数为正数 ＞1表示放大，＜1表示缩小
斜切变形transform'scale
参数为deg，横向斜切+纵向斜切 两个参数
平面位移变形transform'translate
参数都以px为单位 横向移动+纵向移动
3D变形：
3D旋转：transform'rotateX、rotateY
正方向：向上向右
空间移动：transform'translateX、translateY、translateZ
2.正确理解空间移动的意义
translateX、translateY、translateZ
一旦盒子进行了旋转，它的坐标系也进行旋转，是以盒子当前的位置为坐标系建立的
3.掌握舞台必须具备"perspective"属性
perspective： 单位：px
透视强度，决定了人眼到屏幕看到对象的距离，必须要有，否则3D旋转的属性会不生效
课程收获：
谢谢老师，讲的非常细致，很容易懂。