Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by madhavisankholkar
madhavisankholkar
25,555 Points

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.

madhavisankholkar
madhavisankholkar
25,555 Points

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>
                </div>



            </div>
        </div>

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); }

4 Answers

Gari Merrifield
Gari Merrifield
9,598 Points
Gari Merrifield
Gari Merrifield
9,598 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
6,794 Points
Diana Le
Diana Le
6,794 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.

Jonah Shi
Jonah Shi
10,140 Points
Jonah Shi
Jonah Shi
10,140 Points

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