【九月打卡】第4天CSS3D与2D的变形

一、课程概述

1、学习课程名称：前端工程师2022版

2、章节名称：CSS3学习2D与3D转换第一章至第三章（1-1 课程简介-慕课网体系课 (imooc.com)）

3、讲师名称：一阶段老师

4、课程概述：

（1）2D变形知识：包括1）旋转变形2）缩放变形 3）斜切变形 4）位移变形

（2）3D变形：包括1）3D旋转 2）空间移动 

二、内容分享：变形：transform属性

1、旋转变形：transform:rotate();

        （1）括号里填写旋转角度，单位deg

        （2）角度为正时，图片绕着图片中心点顺时针旋转，否则逆时针方向旋转，360度可以转一圈

2、变换原点：transform-origin属性

        （1）transform-orign:0 0;                  左上角（以左上角为中心点进行旋转）

        （2）transform-orign:0 100%;           左下角（水平是0，竖直是100）

        （3）transform-orign:100% 0;           右上角（以右上角为中心点进行旋转）

        （4）transform-orign:100% 100%;    右下角（水平是100，竖直是100）

3、缩放变形：transform:scale();

        （1）括号内表述缩放倍数，没有单位，会以自己图片的中心点进行缩放，当数值小于1时表示缩小元素，大于1时表示放大元素

        （2）transform: scale(sx,sy) 中，sx表示宽度缩放为原元素的sx倍，sy表示高度缩放为原元素的sy倍。

4、斜切变形：transform:skew( x斜切角度 ,y斜切角度);

        （1）括号里表示斜切角度，单位deg

        （2）transform: skew(<angle> [, <angle>]) （备注：中括号包裹的参数表示可选参数），其中angle为倾斜角度，角度方向跟随极坐标角度方向，逆时针为正方向，顺时针为负方向。

        （3）当只有一个参数的时候，第二个参数默认为0deg，例如transform: skew(45deg);为元素的水平方向逆时针倾斜45度，竖直方向倾斜0度。

5、位移变形：transform:translate(  向右移动距离，向下移动距离);

        （1）括号内是移动的距离，单位px

        （2）与相对定位相似，也会老家留坑，形影分离，也可以用于微调位置，

        （3）兼容到ie9，兼容性不如相对定位

6、3D旋转：transform:rotateX();或者rotateY();可以实现绕横轴或者纵轴旋转

        （1）括号内写的是旋转的度数，单位deg;

        （2）X轴正方向是向后仰，Y轴正方向是右肩移动，也可以用空格隔开属性同时转动

        （3）绕横/纵轴旋转，转到±90度和±270度是看不到图形的，因为和底边平行了

        （4）perspective：景深属性，3D变形必须加上，用来定义透视强度，可以理解为人眼到舞台的距离，单位是px

7、空间移动：当元素进行3D旋转后，即可继续用空格隔开，添加translateX()、translateY()、translateZ()属性让元素在空间进行移动，它会朝着它的行径来移动

8、2D、3D坐标系和旋转的正方向

        （1）坐标系方向为正：x轴向右，y轴向下，z垂直屏幕并且指向“我们”的方向

        （2）方向为正：X轴顺时针旋转，Y轴逆时针旋转，Z轴顺时针旋转

三、课程心得
        本章内容学习时比较容易掌握，但是需要对属性和使用方法多加记忆，还有要搞清楚坐标系和旋转的正方向，不然会出现结果与预期相反的情况。