沿着轴线旋转立方体

Question

我终于成功地建立了一个立方体，但是我无法使它沿着轴旋转。此外，旋转也不够平滑。请有人帮我找出如何使其沿着轴旋转的方法 - 先水平旋转一次，然后垂直旋转一次，依此类推...

这是我的立方体： https://jsfiddle.net/4b0y853r/2/

**Html**
<div id=container>
  <div id=card>
    <div class=front>
      1
    </div>
    <div class=right>
      2
    </div>
    <div class=top>
      3
    </div>
    <div class=left>
      4
    </div>
    <div class=bottom>
      5
    </div>
    <div class=back>
      6
    </div>
  </div>
</div>

**Css**
#container{
    margin: 160px 160px;
    transition: 1s;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

#card {
  height: 150px;
  width: 150px;
  color: white;
  font-size: 80px;
  font-weight: bold;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
  transform: rotateY(-45deg) rotateX(-45deg);
}

#card > div {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 150px;
}

.front {
  background: red;
}

.back {
  background: brown;
  transform-origin: 50% 50% -75px;
  transform: rotateY(180deg);
}

.right {
  background: blue;
  transform-origin: left top;
  transform: translateX(100%) rotateY(90deg);
}

.top {
  background: green;
  transform-origin: top center;
  transform: rotateX(-90deg) rotateY(180deg);
}

.left {
  background: yellow;
  transform-origin: top right;
  transform: translateX(-100%) rotateY(-90deg);
}

.bottom {
  background: purple;
  transform-origin: center bottom;
  transform: rotateX(90deg) rotateY(180deg);
}

- Joe

---

我在Firefox中看到更流畅。 - Marcos Pérez Gude

我相信这只能在苹果Safari™浏览器上正常工作。 - Arif Burhan

@ArifBurhan，你的想法很糟糕。没有-webkit-前缀，很可能无法正常工作。 - Marcos Pérez Gude

Answer 1

你需要更改两个地方

a) 你已经正确设置了容器的transform-origin，但是它没有尺寸。将其设置为正确的尺寸。

b) 你的face元素还需要在z轴上居中。

更改已在片段中进行注释

A();
var x = 0;
var y = 0;
function A() {
  setTimeout(function() {
   y+=180;
    document.getElementById('container').style.transform = 'rotateY(' + y + 'deg)';
    B();
  }, 1000);
}

function B() {
  setTimeout(function() {
    x+=180;
    document.getElementById('container').style.transform = 'rotateX(' + x + 'deg)';
    A();
  }, 1000);
}

#container{
    height: 150px;    /* added */
    width: 150px;     /* added */
    margin: 160px 160px;
    transition: 1s;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

#card {
  height: 150px;
  width: 150px;
  color: white;
  font-size: 80px;
  font-weight: bold;
  position: absolute;
  text-align: center;
  transform-style: preserve-3d;
  transform: rotateY(-45deg) rotateX(-45deg) translateZ(75px); /* modified */
}

#card > div {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 150px;
}

.front {
  background: red;
}

.back {
  background: brown;
  transform-origin: 50% 50% -75px;
  transform: rotateY(180deg);
}

.right {
  background: blue;
  transform-origin: left top;
  transform: translateX(100%) rotateY(90deg);
}

.top {
  background: green;
  transform-origin: top center;
  transform: rotateX(-90deg) rotateY(180deg);
}

.left {
  background: yellow;
  transform-origin: top right;
  transform: translateX(-100%) rotateY(-90deg);
}

.bottom {
  background: purple;
  transform-origin: center bottom;
  transform: rotateX(90deg) rotateY(180deg);
}

<div id=container>
  <div id=card>
    <div class=front>
      1
    </div>
    <div class=right>
      2
    </div>
    <div class=top>
      3
    </div>
    <div class=left>
      4
    </div>
    <div class=bottom>
      5
    </div>
    <div class=back>
      6
    </div>
  </div>
</div>

- vals

---

谢谢@vals！现在看起来很棒=）现在我会尝试让旋转更加流畅。 - Joe

我现在明白问题所在了。我一开始以为是一个平稳的问题，但实际上是轴的问题。好的解决方案。 - Marcos Pérez Gude

嘿@vals。在“translateZ（75px）”背后是否有任何数学逻辑可以遵循？这是一个计算出来的数字吗？为什么是75像素？ - Joe

你的立方体是横放着的。如果你想让它居中，你需要将其移动半个立方体尺寸，也就是150像素。 - vals