3D空间转换（位移、旋转、立体呈现）

秋月华星

已于 2024-02-26 09:19:39 修改

阅读量1.4k

点赞数 1

分类专栏：前端三剑客文章标签：动画 3d css3 html

于 2022-01-25 17:07:25 首次发布

本文链接：https://blog.csdn.net/llssdshiyi/article/details/122686275

版权

前端三剑客专栏收录该内容

7 篇文章 0 订阅

订阅专栏

重点语法：

transform:translateX(值);沿x轴位移，y、z轴同理。

transform:rotateX(值);沿x轴旋转，y、z轴同理。

perspective: 像素单位数值;实现透视效果，添加给父级。常用数值范围800px-1200px。

transform-style: preserve-3d; 使子元素处于真正的3d空间，添加给父级。

空间位移：

复合语法：transform:translate3d(x,y,z);

单独语法：transform:translateX(值);transform:translateY(值);transform:translateZ(值);

x、y轴上的改变与2d位移没有区别，z轴垂直于屏幕，正值方向指向用户，负值方向指向屏幕里面。z轴上的移动需要给父级添加perspective: 像素单位数值;实现透视效果。

perspective 常用数值范围在 800-1200 之间。代表意思为视距，作用是在空间转换时，为元素添加近大远小、近实远虚的视觉效果。

例：

两个一样大小的粉蓝方块，如果没加perspective，hover之后看不到变化，但实际上box2向z轴移动了。hover后box2和box1不处在同一个水平面，他们之间有梯度，正面看的效果便是box2比box1大，因为box2离用户更近。

<style>
    .box{
      margin:100px auto;
      width: 700px;
      perspective: 1100px;
    }
    .box1 {
      width: 200px;
      height: 200px;
      margin:0 30px;
      float: left;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      margin:0 30px;
      float: left;
      background-color: rgb(116, 211, 248);
    }

    .box2:hover {
      transform: translateZ(100px);
    }
  </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>

空间旋转：

复合语法：transform:rotate3d(x,y,z,角度度数);

x、y、z取值为0-1。复合语法是用来设置自定义旋转轴的位置及旋转的角度，极少使用。

单独语法：transform:rotateX();transform:rotateY();transform:rotateZ();

绕轴旋转。

例：

以下图片分别是原图、没加perspective绕x轴45度效果、加了透视1000px后分别绕x轴、y轴、z轴正值方向45度效果。

<style>
        .box {
            width: 300px;
            margin: 100px auto;
            border: 2px solid #000;
            perspective: 1000px;
        }

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

        .box img:hover {
            /* transform: rotateX(45deg); */
            /* transform: rotateY(45deg); */
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>

判断旋转方向：

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

立体呈现：

perspective只能呈现近大远小、近实远虚的视觉效果，让z轴位移看得出变化，但不能呈现立体图形翻面等效果。

所以需要给父级添加 transform-style: preserve-3d; 使子元素处于真正的3d空间

例：两个大小相同颜色不同的块，一个在前一个在后，使用transform-style: preserve-3d;的效果。

<style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            /*使子元素处于3D空间*/
            transform-style: preserve-3d;
        }
        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);/*将两个面在空间上分开层次*/
        }
        .back {
            background-color: green;
        }
        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(55deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>