Question

在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>

为什么我添加以下CSS规则：

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

蓝色方块“向下移动”？当我增加高度时，蓝色方块向下移动更多。为什么会这样？我期待蓝色方块向我伸出“更长”。

附加说明

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

http://jsfiddle.net/TLcq9/

请注意，蓝色位于顶部，红色位于右侧。如果添加#cube figure.top{height:300px;}，则蓝色方块向下移动。下面的一些人说这是向下移动的“错觉”。但我不明白这种错觉是如何实现的。在空间上，我不明白。什么是让蓝色方块保持在顶部的直观方式，但是它的高度也会伸展到超出红色方块的顶部？

Answer 1

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

The Blue line is the box

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

我们将尝试旋转蓝色框20deg（旋转向左侧） enter image description here

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

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

enter image description here

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

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

enter image description here

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

现在我们需要使用translateZ拉出蓝框

enter image description here

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

那么现在如果我们将高度更改为300px会发生什么？

我们的蓝盒子会变得更宽
我们的隐形盒子会增加50px（是的，我们有一个看不见的盒子）
隐形框将蓝框向下推50px。

enter image description here

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

因此我们需要使用translateZ再次拉出蓝色框50px enter image description here

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

额外：让我们改变宽度，看看会发生什么 enter image description here

#cube .top {
  -webkit-transform: rotateX( 90deg ) translateZ( 150px );
}
#cube figure.top {height:300px;width:900px;}

这是我的解释：D

抱歉我的英文。

Answer 2

看起来当你改变高度时，数字会更多地出现在屏幕上。所以高度越大，它越低，因为它从屏幕出来。

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

2 个答案: