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

Nick Field
Nick Field
17,079 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

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,089 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,942 Points

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

Justice Omorodion
PRO
Justice Omorodion
Pro Student 8,315 Points

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