Geek Answers Handbook

RotateX in CSS cube not working properly

I learned to create a rotating cube effect. On hover, if I replaced rotateX with rotateY , the cube rotates around the Y axis in the center. But when rotateX present, the cube does not rotate around the X axis in the center. How to implement the correct rotation of the 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>
+5
source share
2 answers

If I understand you correctly, you just set the height of #cube 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>
+2
source

You need to set the origin of the transformation according to the size of the div (cude on one side). So I just changed transform-origin: 100px 100px; for a cube as follows:

 #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 a percentage because the cube is not “direct” and the container uses perspective.

+1
source

More articles:


All Articles