20-3D转换位移语法： transform:translate3d(x,y,z); transform:

位移

语法：

transform:translate3d(x,y,z);

transform:translateX(值);

transform:translateY(值);

transform:translateZ(值);

取值：

像素单位数值

百分比

为何默认情况下，无法观察到Z轴位移效果？

Z轴是视线方向，移动效果应该是距离的远或近，电脑显示屏是平面，默认无法查看远近效果。

添加透视即可查看Z轴效果

透视

透视属性（添加给父级）：

perspective: 值;

取值：

像素单位数值，数值一般在800 - 1200

例如让盒子向Z轴正方向移动200px
效果图

CSS 部分

    <style>
        body {
            /* 父级添加透明属性 */
            perspective: 1000px;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            /* 添加过渡实现动态效果 */
            transition: all 2s;
        }

        .box:hover {
            /* 沿着Z轴正方向移动200px */
            transform: translateZ(200px);
        }
    </style>

HTML 部分

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

3D转换-旋转+立体呈现

空间转换-rotateZ

语法：transform:rotateZ(值);

<style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            /* 让图片围绕着Z轴转动360度 */
            transform: rotateZ(360deg);
        }
</style>

<div class="box">
    <img src="./image/1.jpg" alt="">
</div>

效果图

空间转换-rotateX

语法：transform:rotateX(值);

<style>
        .box {
            width: 300px;
            margin: 100px auto;
            /* 给父级添加透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            /* 让图片围绕着X轴转动60度 */
            transform: rotateX(60deg);
        }
</style>

<div class="box">
    <img src="./image/1.jpg" alt="">
</div>

效果图

空间转换-rotateY

语法：transform:rotateY(值);

    <style>
        .box {
            width: 300px;
            margin: 100px auto;
            /* 给父级添加透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            /* 让图片围绕着Y轴转动60度 */
            transform: rotateY(60deg);
        }
    </style>

<div class="box">
    <img src="./image/1.jpg" alt="">
</div>

效果图

空间转换-立体呈现

使用 transform-style: preserve-3d 呈现立体图形

实现方法：

给父级添加 transform-style: preserve-3d;

使子元素处于真正的3d空间

呈现立体图形步骤
- 盒子父元素添加 transform-style: preserve-3d;
- 按需求设置盒子的位置（位移或旋转）

CSS 部分

    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            /* 利用子绝父相使元素重叠 */
            position: absolute;
            left: 0px;
            top: 0px;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 使橘色向我走近位移200px 移动到前面*/
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        .cube:hover {
            /* 体现空间效果，沿着Y轴旋转90度 */
            transform: rotateY(90deg);
        }
    </style>

HTML 部分

<div class="cube">
    <div class="front">前面</div>
    <div class="back">后面</div>
</div>

效果图