Creating an image cube


show more Creating an image cube provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms show less
please wait ...

Creating an image cube

I have a confession, I love cardboard boxes. Or more specifically, I love taking cardboard boxes apart and seeing how they fit together. I really find it fascinating how designers and manufacturers can take a flat sheet of cardboard and turn it into a box. And that's pretty much what we are going to do in this movie. Take a series of flat 2D images and transform them--pun definitely intended-- into a box, or more specifically a cube. Before we begin, I want to show you what the eventual goal is.

So I have what appears to be a standard gallery here, and as I go to the next image in the gallery, and I click on the thumbnail, the box rotates, and it shows me that image. I can continue clicking on thumbnails to go to each image on the cube, and each time it rotates in an interesting way. So in the first of two movies, we're going to set up the basic photo cube, and then in the second, we'll get it moving. Let's get started.

In my code editor I have the html file for the project open, it&#...

Creating an image cube
Video duration: 9m 44s 2h 25m Intermediate

Viewers:

Creating an image cube provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms

Subject:
Web
Software:
CSS
Author:
please wait ...