Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating 3D transforms

From: CSS: Animations

Video: Animating 3D transforms

We've been working in just 2D so far. But let's have a look at how we can apply the animation skills we've learn to 3D transforms as well. If you worked with 3D transforms before, either statically or with transitions, this tutorial will show you how to use them within animations. If you haven't worked with 3D transforms before, you may want to review the CSS Transitions and Transforms course first before watching this tutorial. I won't be getting into much detail on how the 3D transforms works specifically. In this tutorial, we'll create an effect on a thumbnail gallery by animating each photo with a 3D transform into place.

Animating 3D transforms

We've been working in just 2D so far. But let's have a look at how we can apply the animation skills we've learn to 3D transforms as well. If you worked with 3D transforms before, either statically or with transitions, this tutorial will show you how to use them within animations. If you haven't worked with 3D transforms before, you may want to review the CSS Transitions and Transforms course first before watching this tutorial. I won't be getting into much detail on how the 3D transforms works specifically. In this tutorial, we'll create an effect on a thumbnail gallery by animating each photo with a 3D transform into place.

So it will look a little something like this when the page loads. At the time of this recording, 3D transforms are not widely supported by all browsers. If we take a look at the caniuse.com Support chart, you can see there's a lot of red squares' showing no support or dark green squares showing just a little bit of support. For that reason, I'm creating an effect that isn't critical to my content. If my page is viewed in a browser that doesn't support 3D transforms, my images will still display but they'll just be missing that little bit of extra flare. Nothing critical will be lost, so I don't feel the need to create a fallback alternative for this particular effect.

We're used to working in the X and Y axis for positioning in CSS. But with 3D transforms, we have one more axis to consider, the Z or Zed axis depending on which way you like to say that letter. Our X axis moves from left to right on our page. Our Y axis is the vertical axis, moving from top to bottom. Our Zed axis, or Z axis, moves out of the screen towards us, so higher Z values or Zed values are closer to the viewer. Lower values on the Zed axis are farther away from the viewer, and the higher values on the Zed axis are closer to you as a viewer.

We'll be animating the rotation of our photos using the Rotate Transform. Rotations can happen along any of these three axes. Every HTML element has an origin point, the point at which all transforms will happen from and they are center by default. The default origin point is in the middle. If we rotate an element along its X axis, we will be rotating it in 3D space, and for the purposes of our animation, we're going to move the origin point on our image to the top left so it will kind of hinge in from the left side. Let's go to Coda and have a look at the HTML structure behind this effect.

We have a whole list of images within our wrapper div and each one has the usual things you'd expect for an image, a source, and width, and height, and it also has one additional class assigned to each, and that's the class of pic. If we take a look at our CSS, there are a couple of starting styles that are a bit different than what we've looked at before. Specifically in our wrapper div, we have a perspective set 1000 pixels. For best results when using 3D transforms especially on a group of objects, it's best to set this perspective at the parent element. And again, if you're not familiar with the idea of perspective and transforms in 3D, it will be a good idea to check out the course on CSS Transforms and Transitions to get a little more insight into why it is we picked this and how we got that number.

Perspective essentially defines the focal length of the imaginary lens you're viewing your object through. The higher the number, the more flat things will appear, and the lower the number, the more exaggerated and drastically 3D things will appear. Additionally in our starting CSS, our images have some positioning styles in place to set them in a grid. We'll add one more rule to set the transform origin to the top left like we just looked at. So we'll add our transform-origin, and we will set that to top and left.

Having our images rotate from the left side like we said, we will make it appear more like a hinge rotation than a rotation around its center. Everything is in place for our animation. So let's take quick look at the effect we're going to try to create. Imagine this is a top-down view of our image and the lower line is our browser window. We want to have our image start out rotated 90 degrees away from our browser window. So that way it essentially wouldn't exist at all. And then as we create our animation, we're going to want to rotate it towards being flat against our browser window.

So it will start out almost like an open door and then our animation will cause that door to shut. And then once it's shut, our image will be flat up against our screen, if that's really how web pages worked, and it will appear just like an image normally would. It takes a little imagination to think in 3D sometimes. So let's go back to Coda and actually add this animation we just looked at to our CSS. We'll start out by adding our keyframes blocked just like before, and I'm going to call this animation Hinge, since we just discussed this is going to look a little bit like a door. For this animation, since we're kind of creating an open door to a closed door, I'm going to use the keywords of from and to, to define my keyframes because that really describes what we're doing.

And we're going to start out moving from a rotation along the Y axis of 90 degrees that will be our open door, so rotation on our Y axis of 90 degrees, and then our closed door is essentially having our image flat up against the browser window again. So we'll just copy and paste this line so we can use it again. And this time we'll set in our to keyframe our rotation of 0 degrees, which is essentially no rotation and/or exactly where it would be if we hadn't bothered to transform it at all, and that's where we want things to end up.

With our keyframes defined, let's assign this animation to our image. We'll assign everything with the class of pic, this animation. So we'll assign at the animation name of hinge, since that's the animation we just created. We'll have duration of just 0.5 seconds because we want this effect to happen very quickly is just an added bit of flare as things load in, not something you need to sit and watch. I've actually already picked out a cubic-Bezier function to use to define my animation timing function. I'll just paste that in now. There's no delay, so I will skip that part.

And our animation iteration count will be one. We just want this to happen once. Our animation direction will be normal. Our animation-fill-mode will be forwards. And this important so that way our image maintains the styles from our to keyframe once the animation has completed. So when our animation ends, our image will stay right where it would have been originally if no effect had happened at all. So it's animating itself into place. Let's test our animation and see how things look. So we'll go back over to Chrome, we'll refresh our browser, and you can see all the images hinged into places if they were kind of closing a door towards the browser window.

For an even more interesting effect, though, we can try and assign some delays to some of these images because it's a little bit repetitive to see them all swinging at once. It might be a little interesting to see them stagger a little bit. So below our class of pic, I'll let a couple of nth-of-type rules to vary the animations and create a slightly different effect. So this nth-of-type selector will affect every second image in our list, and we're going to add an animation delay to it to vary things a little bit. So we'll add a delay of something small, 0.2 seconds.

The whole duration is only 0.5 seconds. We want to stagger this, so we want these to start before the first batch ends and then we'll copy and paste this whole rule, and we will add a second nth-of-type rule for every third image just to make things ever so slightly more varied, and we'll change our delay on these ones to 0.3 just to have things staggered even more. So now that we've added two animation delays, there's one other thing we need to change about our animation. The very last thing we have listed in our animation shorthand is the animation-fill-mode of forwards.

But now that we're dealing with delays, we need this to happen during the delay of our animation as well. So we actually now need an animation-fill-mode of both. And that means that our images will maintain the styles from our first from keyframe during their 0.2- or 0.3-second delay, and once they are done they'll maintain the styles from the to keyframe. So now if we save our file and go over to our browser to preview, we'll see we have a nice staggered hinge effect on our photos, and having them stagger is just a little bit more interesting than having them all open at the same time. The result makes for an effect that looks a lot more varied because all the images aren't animating in at exactly the same time.

So that's the quick look at how we can apply animations to our 3D transforms. There's obviously a whole lot more you can do with animations in 3D. So if you're interested in it, it's something you should definitely look into a lot, and you'll be able to create some really cool effects.

Show transcript

This video is part of

Image for CSS: Animations
CSS: Animations

29 video lessons · 11749 viewers

Val Head
Author

 
Expand all | Collapse all
  1. 4m 47s
    1. Welcome
      41s
    2. What you should know before watching this course
      58s
    3. Vendor prefixes and browser support
      2m 11s
    4. Using the exercise files
      57s
  2. 28m 16s
    1. Animation basics
      6m 32s
    2. Exploring animation delay and the fill-mode property
      6m 6s
    3. Working with animation direction
      4m 49s
    4. Understanding easing
      8m 47s
    5. Challenge: Adding keyframes to our animation
      49s
    6. Solution: Adding keyframes to our animation
      1m 13s
  3. 47m 37s
    1. Creating a seamlessly looping animation
      6m 27s
    2. Animating an element into place
      5m 43s
    3. Playing and pausing an animation on hover
      6m 20s
    4. Animating 3D transforms
      8m 6s
    5. Preparing a sprite image for animation
      4m 55s
    6. Animating the sprite image with steps
      5m 34s
    7. Chaining multiple animations on one element
      8m 2s
    8. Challenge: Adding a third animation to the chain
      46s
    9. Solution: Adding a third animation to the chain
      1m 44s
  4. 19m 54s
    1. A preview of what we'll be creating
      1m 10s
    2. Setting up the HTML structure
      1m 48s
    3. Adding the header animation
      5m 57s
    4. Animating the data
      6m 8s
    5. Adding interactivity with JavaScript
      4m 51s
  5. 12m 44s
    1. Why and when to use CSS animations
      4m 50s
    2. Organizing animation code for semantics and fallbacks
      4m 51s
    3. Crafting effective animations
      3m 3s
  6. 3m 0s
    1. Helpful online tools for creating and building animations
      3m 0s
  7. 24s
    1. Next steps
      24s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

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

Your file was successfully uploaded.

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.