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 trialmadhavisankholkar
25,555 PointsThe 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.
4 Answers
Gari Merrifield
9,597 PointsYes, 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
6,794 PointsThanks, 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.
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points@madhavisankholkar it is still super helpful for me visualizing the cubes. Much easier! Many Thanks from Brandon!
Jonah Shi
10,140 PointsThank you madhavisankholkar, it works for me now, I was confused with the same issue
madhavisankholkar
25,555 Pointsmadhavisankholkar
25,555 PointsI 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">
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); }