CSS3变换-为什么增加高度会导致元素向下移动？_Css_Css Transforms

CSS3变换-为什么增加高度会导致元素向下移动？

css

CSS3变换-为什么增加高度会导致元素向下移动？,css,css-transforms,Css,Css Transforms,在Chrome中渲染时，请查看以下代码。它将显示两张幻灯片，一张红方块面向您，一张蓝方块面向上： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" />  <meta name="viewport" content="initial-scale=1.0, user-scalable=0" />

在Chrome中渲染时，请查看以下代码。它将显示两张幻灯片，一张红方块面向您，一张蓝方块面向上：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- disable zooming -->
  <meta name="viewport" content="initial-scale=1.0, user-scalable=0" />

    <style media="screen">

    .container {
      width: 200px;
      height: 200px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1000px;
    }

    #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
    }

    #cube figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
    }

    #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
    }

    #cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
    #cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }

    #cube .front  {
      -webkit-transform: translateZ( 100px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
    }


  </style>

</head>
<body>


  <section class="container">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="top">5</figure>
    </div>
  </section>

</body>
</html>

蓝方“下移”？当我增加高度时，蓝色正方形向下移动得更多。为什么会发生这种情况？我原以为蓝色的正方形会向我突出，变得“更长”

附加注释

这是相同的代码，但这一次，我旋转了两张幻灯片，以便您可以从侧面看到我的意思：

请注意，蓝色在顶部，红色在右侧。如果添加

#cube figure.top{height:300px；}

，蓝色方块将向下移动。下面的一些人说这是向下移动的“幻觉”。但我不明白这种幻觉是如何实现的。在空间上，我不明白。什么样的直观方式可以使蓝色正方形保持在顶部，但也可以在高度上拉伸，使其超出红色正方形的顶部？

看起来，当您更改高度时，图形会更多地从屏幕中显示出来。因此，高度越大，它越低，因为它从屏幕中出来。

看起来，当您更改高度时，图形从屏幕中出来的次数越多。因此，高度越高，它就越低，因为它从屏幕上出来。

假设我们有一个2d框，我们正在查看它（侧视图）

我们将尝试将蓝色框旋转20度（旋转方向为左侧）

现在，如果我们将蓝色框旋转90度，我们的高度将变为宽度，宽度将变为高度（旋转到左侧）

现在让我们看看我们的高度是否变成了宽度（正如你所看到的，当我们将高度增加到200px时，它会变得更宽，因此这意味着我们的高度已经是一个宽度）

现在我们需要用translateZ把蓝色的盒子拉上来

    #cube .top {
  -webkit-transform: rotateX( 90deg ) translateZ( 100px );
}
#cube figure.top {height:200px;}

那么现在如果我们把高度改为300px会发生什么呢

我们的蓝盒子会变得更宽
我们的隐形盒子将增加50像素（是的，没错，我们有一个隐形盒子）
隐形盒子将蓝色盒子向下推50像素

因此，我们需要使用translateZ以50px再次拉起蓝色框

额外：让我们更改宽度，看看会发生什么

这就是我的解释：D

对不起，我说的是英语。