1

当它在 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;}，蓝色方块会向下移动。下面有人说是下移的“错觉”。但我不明白这种错觉是如何实现的。空间，我不明白。什么是让蓝色方块保持在顶部的直观方法，但它的高度也延伸到超出红色方块的顶部？

4

2 回答 2

4

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

蓝线是盒子

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

我们将尝试将蓝色框旋转 20 度（旋转向左侧） 在此处输入图像描述

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

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

在此处输入图像描述

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

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

在此处输入图像描述

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

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

在此处输入图像描述

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

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

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

在此处输入图像描述

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

因此，我们需要使用 translateZ 再次将蓝色框拉起 50px 在此处输入图像描述

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

额外：让我们改变宽度，看看会发生什么 在此处输入图像描述

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

这就是我的解释：D

对不起我的英语不好。

于 2013-08-02T03:34:16.723 回答
0

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

于 2013-08-02T03:19:51.093 回答