CSS动画之转换模块

2D转换模块：注意点：1.可以类似于过渡模块一样简写，但是这里不是用逗号隔开而是用空格
                        2.2D的转换模块会修改元素的坐标系，所以旋转之后的平移就不是水平平移
    格式：旋转：transform: rotate(30deg)旋转角度
          平移：transform: translate(50px,100px);平移的坐标系
          缩放：transform: scale(2,4);缩放的倍数
          翻转：transform: skew(30deg,20deg);沿x轴y轴旋转的角度
          矩阵：transform:matrix(0.866,0.5,-0.5,0.866,0,0);使用六个值的矩阵。达到以上所有功能
          综合：transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);用空格隔开
          形变中心点：transform-origin：50% 50%  可以用百分比，像素，特殊关键字，默认旋转是通过自己的中心点做参考，可以通过修改形变中心点来改变旋转
          旋转轴向：transform：rotateX(45deg);transform：rotateY(45deg);transform：rotateZ(45deg);一般默认旋转是垂直桌面的Z轴旋转的
          透视属性：perspective：500px  近大远小（一般结合旋转轴向来看，更加直观）值是距离物体的多远
          注意点：一定要把透视属性设置到你要观察的元素的父元素（上级就行，设置给它爷爷也行）上面！！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 800px;
            background-color: #5bc0de;
            margin: 0 auto;
        }
        li{
            width: 60px;
            height: 50px;
            background-color: yellow;
            margin: 0 auto;
            margin-bottom: 100px;
            text-align: center;
            line-height: 50px;

        }
        .box2{
            transform: rotate(30deg);
        }
        .box3{
            transform: translate(50px,10px);
        }
        .box4{
            transform: scale(2,4);
        }
        .box5{
            transform: skew(30deg,30deg);
        }
        .box6{
            transform: rotate(30deg) translate(50px,10px) scale(2,4) skew(30deg,30deg);
        }

    </style>
</head>
<body>

<ul>
    <li class="box1">正常</li>
    <li class="box2">旋转</li>
    <li class="box3">平移</li>
    <li class="box4">缩放</li>
    <li class="box5">翻转</li>
    <li class="box6">综合</li>
</ul>
</body>
</html>

1.2D和3D的区别：2D就是没有厚度只有宽高，3D就是除了宽高还加了厚度
默认情况下所有的元素都是2D元素
2.如何呈现3D：类似于透视，给其父元素添加transform-style：preserve-3d就行

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>3D转换</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .father{
12             background-color:skyblue;
13             width: 200px;
14             height: 200px;
15             margin: 100px auto;
16             perspective: 500px;
17             transform: rotateY(0deg);
18             transform-style: preserve-3d;
19         }
20         .son{
21             background-color: red;
22             width: 100px;
23             height: 100px;
24             margin: 20px auto;
25             transform: rotateY(45deg);
26         }
27     </style>
28 </head>
29 <body>
30 <div class="father">
31     <div class="son"></div>
32 </div>
33 </body>
34 </html>