5
Stavo imparando a creare un effetto cubo rotante. Al passaggio del mouse se sostituisco lo rotateX per il rotateY, il cubo ruota intorno all'asse Y centrato. Ma quando è presente rotateX, il cubo non ruota attorno all'asse X centrato. Come posso implementare la corretta rotazione del cubo?RotateX nel cubo CSS non funziona correttamente
#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>