0

我认为我在这里犯了一个很大的思维错误。
请查看这个小提琴：http: //jsfiddle.net/kimgysen/zdP8q/

我想了解如何在 3D 中自己构建一个旋转的立方体，而不是仅仅复制它，所以我正在试验；但在第一阶段，我已经陷入困境。
首先是代码： 

    <section class="container">
      <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <!--
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>-->
      </div>

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

#cube {
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
  -webkit-transform: rotateX( -20deg ) rotateY( 20deg );
          transform: rotateX( -20deg ) rotateY( 20deg );
}

#cube figure {
    margin: 0px;
    display: block;
    position: absolute;
    width: 196px;
    height: 196px;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-align: center;
}

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

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

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

我想知道的是这一行： 

-webkit-transform: rotateX( 90deg ) translateZ( 100px );

现在这对你来说将是一个非常愚蠢的问题，但仍然：

为什么 translateZ 将图形向上移动越过 Y 轴？
将 translateZ 更改为 translateY 时，它会跨 Z 轴移动：-s

-webkit-transform: rotateX( 90deg ) translateY( 100px );

从小学开始我就认为：X轴=水平，Y轴=垂直，Z轴是垂直于两者的轴（即指向你）。

有人可以向我解释发生了什么吗？此时我觉得自己很傻=s

4

2 回答 2

0

是的，轴如你所说。

但是，当您进行旋转时，您并不是在旋转对象；而是在旋转对象。您正在旋转对象空间。

因此，在 X 轴旋转之后，z 轴可以变成 y 轴。（90 度），可以变成 z 轴倒置（180 度），可以变成 y 轴倒置（270 度），并且可以恢复到 360 度的 z 轴。

而且，当然，在两者之间它不与任何轴对齐，并且运动通过对角轴进行。

于 2013-09-27T17:38:37.857 回答
0

看起来你需要一个合乎逻辑的起点来解决这个问题。

将所有立方体侧面/面板设置为 position:absolute; 和变换原点：中心；

现在我们知道我们所有的面板都将相对于面板中心的同一个点移动。

所以，我们现在通过将这些面板推离它的默认 Z 方向来制作这个 3D。
为了制作一个立方体，我们需要将这些面板从它们的默认 Z 方向 0 （我们需要保留它以便在我们制作动画时有一个很好的锚点可以旋转）平移面板宽度的一半，因为...好吧，几何学。

现在我们需要做的就是用 rotateY 和 rotateX (90deg, 180deg, -90deg) 等围绕轴旋转这些东西。

然后就拿整个东西和动画旋转它。

于 2013-09-27T17:59:00.967 回答