继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

artimis_new
关注TA
已关注
手记 39
粉丝 3
获赞 19

课程名称:前端工程师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旋转的属性会不生效


课程收获:

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




打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP