【九月打卡】第13天 前端工程师2022版 2D与3D转换第一讲

课程名称：前端工程师2022版

课程章节：2D与3D转换

课程讲师： elex

课程内容：

1-1 课程简介
    变形：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旋转的属性会不生效

课程收获：

谢谢老师，讲的非常细致，很容易懂。