Вращение куба по его оси

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

Вам нужно изменить 2 вещи

a) Вы уже правильно настроили трансформацию, установленную на вашем контейнере, но это не имеет размеров. Установите правильные размеры

b) Ваш элемент лица также должен быть центрирован на оси z.

Изменения прокомментированы в сниппета

A(); 
 
var x = 0; 
 
var y = 0; 
 
function A() { 
 
    setTimeout(function() { 
 
    \t 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>