Menu
I was learning to create a cube rotating effect. On hover if i replace the rotateX by rotateY the cube is rotating around Y axis centered. But when rotateX is present, the cube is not rotating about X axis centered. How do i implement proper rotation of cube?
#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>
778
If I understand you correctly, you just set the #cube's height to 200px
#container {
perspective: 1000px;
perspective-origin: 0 0;
}
#cube {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: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>You need to set the transform origin according to the div size (one side of the cude). So I just changed the transform-origin: 100px 100px; for the cube like this:
#container {
perspective: 1000px;
perspective-origin: 0 0;
height: 500px;
}
#cube {
position: relative;
top: 100px;
left: 100px;
width: 200px;
transform-style: preserve-3d;
transition: transform 2s;
transform-origin: 100px 100px;
}
#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>It did not work with percentage since the cube is not "straight" sided and the container uses perspective.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
