html - 绕轴旋转立方体

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);
}

Answer 1

你需要改变两件事

a) 您已经在容器上正确设置了 transform-origin，但这是无量纲的。设置合适的尺寸

b) 您的面部元素也需要以 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>