CSS Perspective，较低的数字应该显得更大？

Question

在这个具有不同视角的立方体示例中: http://codepen.io/HugoGiraudel/pen/GLbca

右边的有 -webkit-perspective: 250px; 而左边的有 -webkit-perspective: 1000px;

根据 Mozilla 的说法:“透视 CSS 属性确定 z=0 平面与用户之间的距离，以便为 3D 定位元素提供一些视角。每个 z>0 的 3D 元素变大；每个 z<0 的 3D 元素变小. 效果的强度由该属性的值决定。”

在这种情况下，右边的立方体应该离用户更近 750 像素，那么为什么它没有比左边的立方体大很多呢？同样，如果你打开开发工具并将视角更改为一个很大的数字，如 10000 像素，立方体将保持相同的大小。它不应该很小吗？

这是代码:它不是我的，所以所有功劳归于http://codepen.io/HugoGiraudel/

<div class="wrapper w1">
  <h1><code>perspective: 1000px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w2">
  <h1><code>perspective: 250px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>

还有 CSS:

.wrapper {
  width: 50%;
  float: left;
}

.w1 {
  perspective: 1000px;
}

.w2 {
  perspective: 250px;
}

.wrapper h1 {
  text-align: center;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(32deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;

  background: rgba(tomato, .6);
  border: 1px solid rgba(0,0,0,.5);

  color: white; 
  text-align: center;
  line-height: 2em;
}

.front  { transform:                  translateZ(1em); }
.top    { transform: rotateX( 90deg)  translateZ(1em); }
.right  { transform: rotateY( 90deg)  translateZ(1em); }
.left   { transform: rotateY(-90deg)  translateZ(1em); }
.bottom { transform: rotateX(-90deg)  translateZ(1em); }
.back   { transform: rotateY(-180deg) translateZ(1em); }

Answer 1

你必须明白，改变的是视角，而不是尺度。

当你问的时候

In this case, the right cube should be 750px closer to the user, so why is it not considerably larger than the one on the left?

您需要考虑的是，您距离 750 像素更近以计算视角，而不是尺寸。

关键是规范中的这一部分:

Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller

你的立方体以原点为中心(你让每个面都在相反的方向上进行相似的运动)。这意味着立方体中心(好吧，那里什么也没有，但明白这个概念)将保持相同的大小。

同样，如果您想象 z 平面，它或多或少会将立方体切成两半。在那个平面上，没有尺寸变化。

正面确实变大了，背面确实变小了(少量)。这在靠近顶点或最远顶点的线中更容易看到