Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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's the about.htm file from the Chapter 4/04_03/about folder, as well as, transitions.css from the _css folder in that same path. Let's take a look at the HTML structure first. I want to scroll down to the section of the page where the cube appears, which is around line 46. Here we have an outer div with an ID of theArt, which encloses another div with an ID of cube.
As you may have noticed with other movies in this course, you need a two-level container to properly set up the 3D transforms. Within the cube div, which starts on line 47, you'll find six figures, each with a different class that indicates the figure's position on the cube, front, back, right, left, top and bottom. Below the art div are the thumbnails and a div with an ID of options. Starting on line 57 each thumbnail has a class that corresponds to its larger image.
For example, the first one has a class of show-front, which is the thumbnail image that's the same as the figure for the front class. This will allow us eventually to click on any thumbnail and see its larger image. Okay, that's it for the HTML. Let's switch over to the CSS. Again, I have opened the transitions.css file from the Chapter 4/04_03/_css folder and the first thing we need to do is to set up the perspective. As I said, that's done on the outer container surrounding the div that holds the images.
Here that div is the one with the ID of theArt, so I'll just add my perspective to this existing rule, starting with webkit-perspective, and let's give it a value of 1000. And as before, I'll copy that line and then paste it in three times, and I'll change the first one from -webkit to -moz for Mozilla, and the second one to -o for Opera.
And then of course, get rid of the last one for CSS3 property perspective. Get rid of this empty space here, let's skip over the show-buttons and start to work on the rule cube. The perspective property has already set up 3D for its immediate child, which is the div with the ID of cube, and now we need to pass that on to the cube's children, which are the figures, and that's done with the transform-style property set to preserve-3d.
Let's do the webkit version first, and now we can copy that and paste it in a number of times and make our substitutions, pretty quick and easy. Next, we'll need to add the rule so that the transition can take place. That is also applied to the cube selector. Let's set the duration for the transform to 1 second. Copy the line, paste it three times and then make the changes to the vendor prefixes.
You will of course have to do this in both places on line, for the transition, as well as the transform. That's all done, and now we're ready to start building our cube. This will take six CSS rules, one for each side of the cube. In all but one, we'll set up two transforms. One to rotate the side properly and one to move or translate it into position. We're going to start with the exception, the front, which because it is the front facing part of the cube, doesn't need any rotation.
Now I am going to put these all down below here, I'll enter in a few extra lines just to give us little bit of space to make it easier to read. And let's enter in our first selector, which is going to be #cube .front. So here, as I said, we only need to translate it along the Z axis. So let's set up that transform first with webkit and enter in the function translateZ and the value, 136px. Where do we get the value of 136? Well, it's one half of the width of the image 270 pixels, plus two for the border, that's 272 divided by 2, 136.
You may also be wondering why we had to do anything at all for the front. Well, because we're going to translate all the other sides into position, if we didn't do it for the front, it would appear inset and then reveal the cube structure. We'll use that same value throughout creating the cube, so let me go ahead and copy my webkit-transform and then paste it in, changing to Mozilla, Opera and then CSS3, okay. Now let's move on to the back.
Here we need to take the image and rotate it on its X axis 180 degrees so that it's facing completely opposite from the front, basically spinning it around. We'll also need to translate it along the z-index the same amount, 136 pixels. So, I'll set up my rule for #cube.back. Starting with the webkit version, and let's rotate along the X axis as I said.
We'll do this -180 degrees and then also translate it along the Z axis. Time to do that famous copy and paste routine. All right that's done. Now let's work on the sides. These will need to be rotated on their Y axis 90 degrees so that they're perpendicular to the front and also translated. We'll rotate the right face a + 90 degrees, in the left a -90 degrees.
Now I am going to copy the #cube .back, and then paste it in, change back to right and since they both have rotations and translations just change a couple values here. So I'll change rotateX to rotateY, and as I said I was going to do this 90 degrees. Now once I have that, let's do a little copying here and paste it in.
It will be the same for all the vendor prefixes of course, and our translateZ value stays the same. Okay, that was pretty easy. Now let's go ahead and do the one for the left side, again, I'll copy #cube .right here, paste it in, change right to left and all I need to do here is change the degrees from +90 degrees to -90 degrees.
And for that I'll just click and drop in my negative sign. Four down, two to go, the top and bottom to be exact. Just as we rotated the sides on their Y axis by 90 and -90 degrees, we'll do the same for the top and bottom, but we'll use the X axis instead. So for this, let's copy cube back again, since that already has the rotateX correctly. And all we'll need to do is to change the value from -180 to a version of 90, so I'll paste that in, change back to top, and as I said, we're going to rotate the top a +90 degrees.
So let's just change that value from -180 for all four of these, to 90 degrees. This first part, the actual building of the cube is now done. Although, we'll have to animate it in the next movie before you can see the results of your work. Okay, the coding is done. Let's save the transitions.css file. When you're ready, I'll see you in Chapter 4's Animating the Image Cube.
Get unlimited access to all courses for just $25/month.Become a member