5
キューブの回転効果を作成することを学んでいました。ホバー上でrotateXをrotateYに置き換えると、キューブはY軸を中心に回転します。しかし、rotateXが存在する場合、立方体はX軸を中心に回転していません。どのようにしてキューブの適切なローテーションを実装するのですか？CSSキューブのRotateXが正しく動作しない
#container {
perspective: 1000px;
perspective-origin: 0 0;
}
#cube {
position: relative;
top: 100px;
left: 100px;
width: 200px;
transform-style: preserve-3d;
transition: transform 2s;
transform-origin: 50% 50%;
}
#cube div {
position: absolute;
width: 200px;
height: 200px;
}
#front {
transform: rotateY( 0deg) translateZ(100px);
background-color: rgba(0,34,62,0.3);
}
#right {
transform: rotateY( 90deg) translateZ(100px);
background-color: rgba(110,34,162,0.3);
}
#back {
transform: rotateY(180deg) translateZ(100px);
background-color: rgba(20,4,62,0.3);
}
#left {
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(80,134,2,0.3);
}
#top {
transform: rotateX(90deg) translateZ(100px);
}
#bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
transform: rotateX(360deg);
}<html>
<body>
<div id="container">
<div id="cube">
<div id="front">
<h1>1</h1>
</div>
<div id="right">
<h1>2</h1>
</div>
<div id="back">
<h1>3</h1>
</div>
<div id="left">
<h1>4</h1>
</div>
<div id="top">
<h1>5</h1>
</div>
<div id="bottom">
<h1>6</h1>
</div>
</div>
</div>
</body>
</html>