perspective必须设置在 `transform style: preserve-3d` 元素的父级元素上吗?

站长

2024年07月12日 09:25 · 阅读数 10

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .scene {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        perspective: 600px;
      }

      .cube {
        width: 100%;
        height: 100%;
        transition: all 3s;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: center center -100px;
      }
      .cube:hover {
        transform: rotateY(360deg);
      }
      .cube__face {
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 200px;
        text-align: center;
        background-color: aquamarine;
      }
      .cube__face_front {
        z-index: 1;
      }
      .cube__face_right {
        transform-origin: left;
        transform: rotateY(90deg);
        right: -200px;
      }
      .cube__face_back {
        transform: translateZ(-200px) rotateY(180deg);
      }
      .cube__face_left {
        transform-origin: right;
        transform: rotateY(-90deg);
        left: -200px;
      }
      .cube__face_top {
        transform-origin: bottom;
        transform: rotateX(90deg);
        top: -200px;
      }
      .cube__face_bottom {
        transform-origin: top;
        transform: rotateX(-90deg);
        bottom: -200px;
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="cube">
        <div class="cube__face cube__face_front">front</div>
        <div class="cube__face cube__face_back">back</div>
        <div class="cube__face cube__face_right">right</div>
        <div class="cube__face cube__face_left">left</div>
        <div class="cube__face cube__face_top">top</div>
        <div class="cube__face cube__face_bottom">bottom</div>
      </div>
    </div>
  </body>
</html>

如果perspective设置在. scene元素上一切正常，但是我把perspective转移到.cube上，就变成下面这个样子了 perspective必须设置在 `transform style: preserve-3d` 元素的父级元素上吗?

   .scene {
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }

      .cube {
        width: 100%;
        height: 100%;
        transition: all 3s;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: center center -100px;
        perspective: 600px; //perspective属性从.scene移动到这里
      }

perspective直接设置在cube上和scene上有啥区别，为啥效果不同?

1个回答

test

2024-07-12

你可以把 .cube__face 类增加一个 border 属性来辅助你理解Z轴深度。

如果你是单纯想要做一个视角拉远的效果，同时不想让矩形旋转的时候变形，其实放在 .scene 类上面才是正确的效果。 answer image

如果你放到了了 .cube 类上，那么 "视角Z轴" 距离就是在 .cube 元素上了。会使 .cube 元素的矩形形变。然后你在使用 transform:rotateY() 旋转的时候其实是在旋转形变之后的矩形，所以效果是这样的，并且我添加一个旋转角度之后的元素辅助你理解。 answer image

相关阅读perspective - CSS | MDN

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容