2D转换模块

transform: translate(50px,50px);平移属性
- 平移属性,第一个参数代表水平,第二个参数代表垂直方向只写一个参数代表水平方向
transform: rotate(45deg);旋转属性
- 注意点: 旋转属性需要加上度数单位deg
transform: scale(1,0.5);缩放属性
- 第一个参数:水平方向
  第二个参数:垂直方向
- 注意点:
  如果取值是1, 代表不变
  如果取值大于1, 代表需要放大
  如果取值小于1, 代表需要缩小
  如果水平和垂直缩放都一样, 那么可以简写为一个参数

注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
transform: translate(50px) rotate(45deg) scale(2);

2D转换形变中心点

通过设置transform-origin属性来修改形变中心点
默认情况下所有的元素都是以自己的中心点作为参考来旋转的/缩放, 我们可以通过形变中心点属性来修改它的参考点
transform-origin属性取值
- 第一个参数:水平方向
  第二个参数:垂直方向
- 取值有三种形式
  具体像素
  百分比
  特殊关键字

transform-origin: 30px 30px;
transform-origin: 50% 30%;
transform-origin: bottom right;

3D转换模块

什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的
如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

注意点:
transform-style: preserve-3d 需要给父元素添加

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 500px;
            transform-style: preserve-3d;
            transform: rotateY(0deg);

        }

        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid #000;
            margin: 0 auto;
            margin-top: 50px;
            transform: rotateY(45deg);
        }
    </style>
<div class="father">
    <div class="son"></div>
</div>

3D立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }

        ul{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateX(0deg) rotateY(0deg);
            transform-style: preserve-3d;
            animation: sport 8s alternate linear;
            perspective: 500px;
        }

        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li:nth-child(1){
            background-color: red;
            transform: translateX(-50%) rotateY(90deg);

        }

        ul li:nth-child(2){
            background-color: yellow;
            transform: translateX(50%) rotateY(90deg);

        }
        ul li:nth-child(3){
            background-color: green;
            transform: translateY(-50%) rotateX(90deg);

        }
        ul li:nth-child(4){
            background-color: blueviolet;
            transform: translateY(50%) rotateX(270deg);

        }
        ul li:nth-child(5){
            background-color: blue;
            transform: translateZ(-100px) rotateX(180deg);

        }
        ul li:nth-child(6){
            background-color: pink;
            transform: translateZ(100px);

        }

        @keyframes sport {
            from{
                transform: rotateX(0deg);
            }

            to{
                transform: rotateX(360deg);
            }
        }


    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>