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.

  • 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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">