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 trialNick Field
17,091 PointsCompleting The Cube...
Hey,
After watching these great tutorials I wanted to build on the cube, so that all sides are filled, and the user gets a glimpse of all sides on hover.
You can check out the codepen for this here
To create; I first fixed the image widths and heights to 200px;
.front,
.back,
.left,
.right {
width: 200px;
height: 200px;
display: block;
position: absolute;
}
In the HTML file I appended two additional <img> elements at the bottom of the .photo-cube div, one with a class 'top' and one with class 'bottom'. I linked a couple of existing jpgs in the photos folder to these.
Next I added the .top and .bottom classes to the same rule in the interactions.css file;
.front,
.back,
.left,
.right,
.top,
.bottom {
width: 200px;
height: 200px;
display: block;
position: absolute;
}
I edited the existing transform: translate rules to use 100px instead of 110px (100px is half the width/height of each side), then I added .top and .bottom rules which placed the new sides at the top & bottom.
.top {
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(270deg) translateY(100px);
transform-origin: bottom center;
}
Finally I altered the .photo-cube:hover rule so that when the user hovers over the cubes they rotate on both the X and Y axis.
.photo-cube:hover {
transform: rotateX(360deg) rotateY(-270deg);
}
The codepen example doesn't use the images only available for this tutorial, so I used simple colours and numbers to indicate sides of the cube. I also added separate transition declarations on .cube-container to hide the box-shadow on hover-on/hover-off
Feedback appreciated! Would be great to get some ideas on how to develop this :)
Natasha Godwin
11,012 PointsAwesome work! Thanks for taking the time to post this!
7 Answers
Guil Hernandez
Treehouse TeacherWell done, Nick Field!
I just added your post to the teacher's notes of the video. :)
Nick Field
17,091 PointsThank you both! :)
Jason Anders
Treehouse Moderator 145,860 PointsGreat Job - Very Cool!
I also added some markdown to the code in your post here for syntax highlighting.
Dor Sarel
9,987 PointsNice Work! One question - how do you set the transform-origin? I mean how do you know to set it "top center" or "bottom center"?
Jennifer Nordell
Treehouse TeacherOooooo nice work! Kudos!
René Sánchez
9,954 PointsThis is really awesome nick, inspiring and creative! (Y) Thanks for sharing
Justice Omorodion
Courses Plus Student 8,315 PointsGreat experiment. You try something new, as in order to gain experience. I like that man...
Justin Wu
7,300 PointsJustin Wu
7,300 Pointsthanks Nick!