Rotating a cube on its axis

Question

I finally managed to build a cube but i'm unable to rotate it on its axis. In addition the rotation is not smooth. Could someone please help me to figure out how to rotate it on its axis - one time horizontally and the second vertically and so on...

Here is my cube: 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

You need to change 2 things

a) You already have transform-origin correctly set on your container, but this is dimension-less. Set it the proper dimensions

b) your face element needs also to be centered on the z axis.

The changes are commented in the snippet

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>