学习空间转换-3D转换-CSDN博客

本文链接：https://blog.csdn.net/weixin_54454406/article/details/138005276

1.什么是空间转换？

使用的是transform属性实现元素在空间内的位移，旋转，缩放等效果。

空间：是从坐标轴角度定义的。x,y,z三条坐标轴构成的一个立体空间，Z轴位置与视线方向相同。

所以空间转换也被叫做3D转换

语法：

transform:translate3d(x,y,z);
transform:translateX(值);
transform:translateY(值);
transform:translateZ(值);
里面的值可以是正数也可以是负数
可以是像数单位值，也可以是百分比。

2.视距

perspective属性实现透视效果。在我们的现实生活中如果一个人慢慢的从远走到我目前，那么整个人也就慢慢变大，但他不是真正意义上面的变大，而是对于我们的眼球他更近了，也就更大了。也就是我们常说的近大远小。

属性：perspective。一般放到body属性中。

它的取值一般是800-1200。值越小，盒子的变换会比较猛烈。也就是说，值越小，离眼球的距离就越近。

作用：也就是在实现空间转换的时候，为元素添加近大远小，近实远虚的视觉效果。

3.空间旋转

属性：rotate实现元素空间旋转的效果。

语法：

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 开启视距 */
            perspective: 800px;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: aqua;
            margin: 100px auto;
            transition: all 8s;
        }

        .box:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>

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

</html>

自定轴位置

语法：

route3d(x,y,z,角度度数);用来设置自定义旋转轴的位置以及旋转的角度
x,y,z的取值为0-1之间的数字

4.立体呈现

属性

transform-style:preserve-3d;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 800px;
        }
        .father {
            width: 20px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
            /* 设置3D转换，必须给父盒子设置3D呈现 */
            transform-style:preserve-3d ;
            transition: all .3s;
        }

        .father div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .father .son1 {
            background-color: red;
            transform: translateZ(100px);
        }
        .father .son2 {
            background-color: blue;
        }

        .father:hover {
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</body>
</html>

5.案例-3D导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 600px;
        }

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

        .father div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .son1 {
            background-color: aqua;
            transform: translateZ(25px);
        }

        .son2 {
            background-color: blueviolet;
            transform: translateY(-25px) rotateX(90deg);
        }

        .father:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">首页</div>
        <div class="son2">index</div>
    </div>
</body>

</html>

注意：本文章是笔者的学习笔记，如果您在浏览或者运行代码的时候发现了问题，还请您在评论区留言，笔者在看到后会在第一时间解决，谢谢。