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

Nick Field
Nick Field
17,091 Points

Completing 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 :)

thanks Nick!

Awesome work! Thanks for taking the time to post this!

7 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Well done, Nick Field!

I just added your post to the teacher's notes of the video. :)

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Great Job - Very Cool! :thumbsup:

I also added some markdown to the code in your post here for syntax highlighting.

:dizzy:

Dor Sarel
Dor Sarel
9,987 Points

Nice Work! One question - how do you set the transform-origin? I mean how do you know to set it "top center" or "bottom center"?

René Sánchez
René Sánchez
9,954 Points

This is really awesome nick, inspiring and creative! (Y) Thanks for sharing

Justice Omorodion
PLUS
Justice Omorodion
Courses Plus Student 8,315 Points

Great experiment. You try something new, as in order to gain experience. I like that man...