移动web 空间转换 3D

news2025/10/31 6:03:40

移动web 空间转换 3D

- 空间转换 3D
- 3D位移
- 透视
- 3D旋
- - rotateX
  - rotateY
- 左手法则
- 立体呈现

空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴。
在这里插入图片描述

一定要记住3个坐标轴取值的正反：

X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

3D位移

完整写法：

 transform: translate3d(x, y, z);

不过在很多情况下，经常喜欢分开写：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 3d位移的写法 */
            /* x y z之间用逗号隔开 */
            /* transform: translate3d(x,y,z); */
            transform: translate3d(100px, 100px, 200px);
            transform: translate3d(100px, 0, 0);
        }
    </style>
<body>
    <div class="box"></div>
</body>

透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大

3D旋

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。
在这里插入图片描述

注意：默认的旋转中心在盒子的中心位置。

 body {
     /* 父级添加透视 */
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(360deg);
}

rotateY

类似钢管舞。
在这里插入图片描述

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

左手法则:
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

在这里插入图片描述

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

 transform-style: preserve-3d;

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

        .cube div {
            /* 1.1 添加定位 让2个盒子叠加在一起 */
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            /* 向我们面前拉（移动） */
            background-color: orange;
            /* transform: translateZ(200px); */
            transform: translateZ(100px);

        }

        .back {
            background-color: green;
            transform: translateZ(-100px);
        }

        .cube:hover {
            transform: rotateY(65deg);
        }
    </style>
</head>

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