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