3D转换 - 技术栈

特点

近大远小
物体后面遮挡看不见

三维坐标系

x轴：水平向右（右正左负）
y轴：垂直向下（下正上负）
z轴：垂直屏幕（外正内负）

位移

3D移动在2D移动基础上多加了一个z轴
transform：translateX（100px）在x轴上移动
transform：translateY（100px）在y轴上移动
transform：translateZ（100px）在z轴上移动（一般用px单位）
transform：translate3d（x,y,z）其中x y z分别是指要移动的轴的方向的距离

透视

透视（perspective）我们也称为视距：人的眼睛到屏幕的距离
如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视单位是像素
透视写在被观察元素的父盒子上

js 复制代码

<style>
        body{
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>

d：视距
z：z轴，物体距离屏幕，z轴越大（正值）我们看到的物体就越大

旋转

3D旋转可以让元素在三维平面内沿着X轴Y轴Z轴或者自定义轴旋转
transform：rotateX（45deg）沿着X轴正方向旋转45度
transform：rotateY（45deg）沿着Y轴正方向旋转45度
transform：rotateZ（45deg）沿着z轴正方向旋转45度
transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg为角度，不需要沿着哪个轴转哪个轴就赋值为0

左手准则

左手拇指指向轴正方向
其余手指弯曲的方向就是该元素沿着轴旋转的方向（正值）

呈现

`transform-style`

控制子元素是否开启三维立体环境
transform-style：flat子元素不开启3d立体空间，默认
transform-style：preserve-3d子元素开启立体空间
代码写给父级，但影响的是子盒子

js 复制代码

<style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: blue;
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div></div>