Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Project: Part 2

Project: Part 2

6:32

In this video, we complete a small project that uses CSS3 transitions, transforms, and animations.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

  • 0:07

    CSS3 Animation - Project: Part 2 with Nick Pettit

  • 0:13

    In the previous video, we set up a basic page with a few page elements.

  • 0:17

    Now we're ready to apply some transforms,

  • 0:20

    transitions, and animations.

  • 0:23

    Now that we have our flat planes,

  • 0:26

    we can position them in 3d space.

  • 0:28

    We want to arrange them in a ring

  • 0:31

    with their front faces pointing outwards.

  • 0:34

    To do that, we'll translate them all around the 'z' axis

  • 0:38

    and then rotate them around their origin

  • 0:41

    along the 'y' axis.

  • 0:43

    So let's try moving the first plane.

  • 0:46

    We'll skip down here a little bit.

  • 0:49

    We'll select 'shape, and we want to select the child, .p1

  • 0:57

    and we'll do a webkit-transform: and we want to translate this

  • 1:05

    along the 'z' axis, and we'll do about 250 pixels.

  • 1:11

    We want to translate them outward and rotate each one.

  • 1:15

    The first plane doesn't need to be rotated

  • 1:18

    but the second one does.

  • 1:20

    Because we have eight planes to rotate around 360 degrees,

  • 1:24

    we'll rotate each plane by 45 degrees.

  • 1:28

    Let's go ahead and copy and paste that

  • 1:31

    and we want to select the second plane

  • 1:34

    and we want to rotate it along the 'y' axis by 45 degrees.

  • 1:45

    Now I'm going to cheat a little bit and copy and paste the rest of these in

  • 1:49

    so you don't have to sit here and watch me type them all out.

  • 1:54

    You can see that each one of these planes

  • 1:58

    are rotated by 45 degrees, and we wrap back around

  • 2:04

    to the first plane, which should sit at 0 or 360 degrees.

  • 2:09

    Now, let's save this out and refresh the browser

  • 2:13

    and that's what it looks like.

  • 2:16

    It's starting to look a lot more like a final result,

  • 2:19

    and we could probably do other things to enhance this,

  • 2:22

    like add background pictures if we were going to make an image gallery,

  • 2:26

    or a carousel, and so on.

  • 2:29

    But for the sake of simplicity, we're going to go ahead and animate what we have.

  • 2:33

    We want this ring to spin around on its axis.

  • 2:37

    Now, we could spin each individual plane,

  • 2:40

    but that would be really overly complex.

  • 2:43

    Instead, we can just spin the entire structure, so let's create a keyFrame rule.

  • 2:49

    We'll switch back to the text editor and scroll up to the top

  • 2:56

    and we'll create a webkit keyFrames rule called 'spin.'

  • 3:06

    We'll be going from a webkit transform along the 'y' axis.

  • 3:18

    We'll start out at 0 degrees, and we want to rotate this

  • 3:24

    all the way around the 'y' axis.

  • 3:32

    We'll rotate this by -360 degrees.

  • 3:41

    Now, the reason I did -360 degrees is so that it spins backwards

  • 3:46

    and you can see all the numbers in order.

  • 3:49

    This will simply spin the element on the 'y' axis

  • 3:52

    by one revolution.

  • 3:54

    To use this keyForm rule, we will add the animation

  • 3:57

    to the parent element that contains all of our planes,

  • 4:01

    and that is the shape div, right here.

  • 4:05

    So let's go ahead and type out a webkit-animation:

  • 4:10

    and we want to use the spin rule that we just created.

  • 4:15

    We'll have it spin around on its axis every eight seconds

  • 4:19

    and because we have eight planes, that means that each plane will get one second.

  • 4:24

    We want it to spin infinitely and we want to apply a linear animation curve.

  • 4:31

    When I switch back to Safari and refresh the browser,

  • 4:34

    this is looking really good.

  • 4:37

    But there's still more to do.

  • 4:40

    Earlier, I mentioned that you could adjust the perspective

  • 4:43

    of your 3d transforms, so let's try shifting their perspective a little bit.

  • 4:48

    We'll switch back to our text editor

  • 4:51

    and when we hover over the wrapper--just select that here--

  • 4:59

    we want to do a webkit-perspective-origin:

  • 5:05

    and we'll leave the 'x' axis the same, but we want to tilt up a little bit,

  • 5:10

    so we'll do -100 pixels on the 'y' axis.

  • 5:15

    So now when I hover over, the perspective shifts.

  • 5:20

    We've used 3d transforms and some animation,

  • 5:24

    but we haven't used any transitions yet.

  • 5:26

    Let's use a transition to smoothly animate the shift in perspective.

  • 5:32

    In our wrapper here, we'll add a webkit-transition:

  • 5:35

    and we want to transition on the webkit perspective property

  • 5:44

    and we'll make the transition last about one second.

  • 5:48

    Now when we switch back to Safari and hover over,

  • 5:53

    you can see that the perspective shifts very smoothly

  • 5:58

    and it smoothly animates.

  • 6:01

    We're done with this project.

  • 6:03

    When using transitions, transforms, and animations in webkit,

  • 6:07

    there is one added bonus that I haven't mentioned.

  • 6:10

    On iOS based devices, all of these properties

  • 6:14

    are hardware accelerated,

  • 6:16

    which makes them ideal for creating moving graphics and interactive web pages.

  • 6:20

    That's all for transforms, transitions, and animations,

  • 6:24

    and you should now have a good idea of how to use them together.

  • 6:27

    [?mellow guitar music?]

  • 6:29

    Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.