CSS CSS Transitions and Transforms Adding 3D Effects with CSS Build a Rotating 3D Cube

The way the sides are named in this tutorial seems wrong.

The title (blue slide) should be left and not on the back side. The image 2.jpg should be right, image 3.jpg should be back. The back will need 2 90 degree turns to come to the front. The way the sides are named makes understanding the css a bit hard.

I think it would have been useful to explain how each side is moved at its rest position and on hover.

This is my solution:

Index.html (I changed the class names based on the correct sides) <div class="cube-container"> <div class="photo-cube">

                <img class="front"src="img/photos/1.jpg" alt="">
                <img class="right" src="img/photos/2.jpg" alt="">
                <img class="back" src="img/photos/3.jpg" alt="">

                <div class="left photo-desc">
                  <h3>Earth from Space</h3>
                  <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                    <a href="#" class="button">download</a>


interactions.css (I simplified the css rules based on what makes sense). I think this is cleaner and less rules.

.front { transform: translateZ(110px); }

.right { transform: rotateY(90deg) translateZ(110px); }

.back { transform: translateZ(-110px); }

.left { transform: rotateY(-90deg) translateZ(110px); }

3 Answers

Jonah Shi
Jonah Shi
9,509 Points

Thank you madhavisankholkar, it works for me now, I was confused with the same issue

Gari Merrifield
Gari Merrifield
9,548 Points

Yes, naming conventions that matched positions would have really helped. Being dyslexic, using names that don't seem to match the actual final positions is very confusing.

Diana Le
Diana Le
5,193 Points

Thanks, madhavisankholkar. I was also having trouble visualizing the transform properties until I inspected the divs in the browser and realized the names didn't match what I thought were the sides at all.