Start learning with our library of video tutorials taught by experts. Get started

CSS: Transitions and Transforms
Illustration by

Creating an image cube


From:

CSS: Transitions and Transforms

with Joseph Lowery

Video: 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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Transitions and Transforms
2h 25m Intermediate Jul 11, 2012

Viewers: in countries Watching now:

With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.

Topics include:
  • Understanding transition basics
  • Working with 2D and 3D transforms
  • Animating color changes
  • Fading objects
  • Changing the size of page elements and fonts
  • Transitioning multiple properties at the same time
  • Understanding keyframes and animations
  • Working in the z-index
  • Adding JavaScript interactivity
  • Crafting transitions in Dreamweaver
Subjects:
Web Web Design Web Development
Software:
CSS
Author:
Joseph Lowery

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'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.

There are currently no FAQs about CSS: Transitions and Transforms.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.