キューブをその軸で回転する

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

あなたがする必要がある：縦1水平回目と2のように...ここで

は私の立方体である - 誰かがその軸上で回転させる方法を見つけ出すために私を助けてもらえ2つのものを変更する

a）変換元がコンテナに正しく設定されていますが、これはディメンションがありません。適切な寸法に設定してください。

b）face要素も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>