Question

我认为这是一个很好的思维错误。
请查看这个小提琴：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

Answer 1

是的，轴就像你说的那样工作。

但是，当你进行旋转时，你不会旋转物体;你正在旋转物体空间。

因此，在X轴旋转后，z轴可以成为y轴。（在90度），可以成为反转的z轴（在180度），可以成为y轴反转（在270度），并可以在360度恢复到z轴。

然而，当然，它之间没有与任何轴对齐，并且运动通过对角轴。

Answer 2

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

将所有立方体侧面/面板设置为位置：绝对;和transform-origin：center;

现在我们知道所有面板都会相对于同一个位置移动，即面板的中心。

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

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

然后只需要拍摄整个内容并在其上制作旋转动画。

CSS3D translationZ和translationY思维错误

2 个答案: