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 1

Project: Part 1


In this video, we embark on a project that combines CSS3 transitions, transforms, and animations. This video goes over the basic project setup.

Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

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

  • 0:07

    CSS3 Animation - Project: Part 1 with Nick Pettit

  • 0:12

    In the past few videos, we've been learning about transitions,

  • 0:16

    transforms, and animations.

  • 0:19

    Let's review what we've learned and combine all of these concepts

  • 0:22

    into a single project.

  • 0:25

    We're going to create a project that's inspired by what you see here.

  • 0:29

    This is from webkit's Surfin' Safari Blog

  • 0:32

    and it's an example of how you can use 3d transforms,

  • 0:36

    transitions, and animations, all together.

  • 0:39

    In a more practical setting, this might be good for creating

  • 0:43

    a visually exciting photo gallery or a simple interactive game.

  • 0:48

    We're going to build a simplified version of this,

  • 0:51

    so that you can get an idea of how all the concepts we've talked about so far

  • 0:56

    can work together.

  • 0:59

    Now, this is just a basic page.

  • 1:02

    There's nothing really on here yet except for a page background,

  • 1:06

    and switching over to my text editor, you can see

  • 1:10

    that we have some basic hmtl markup here,

  • 1:13

    nothing really much to speak of except for a wrapper div.

  • 1:16

    There is very little CSS, just a little bit of CSS to boot-strap the page,

  • 1:22

    and in a separate style sheet, we'll be doing our CSS styles.

  • 1:27

    Now first, we're actually going to start out with some markup,

  • 1:31

    so you can see how this thing is structured.

  • 1:33

    I'm going to go into my wrapper div,

  • 1:36

    and I'm going to create another div called "shape"

  • 1:41

    and this will be the div that contains our 3d planes.

  • 1:48

    We're going to go ahead and create a few more divs in here,

  • 1:52

    actually, eight more divs.

  • 1:55

    We're going to give them the class "plane"

  • 1:58

    and we're also going to give them a class of p1 and I'm going to put a number 1

  • 2:04

    inside the div and close it, and we'll make another div

  • 2:09

    just like that with two, and p2, and I'm just going to go ahead

  • 2:14

    and cheat a little bit here,

  • 2:17

    and copy and paste a few more of these divs

  • 2:21

    so that we have eight of them.

  • 2:23

    When we switch back to Safari and refresh the page,

  • 2:26

    you can see that we have our divs numbered one through eight.

  • 2:31

    Not much to look at yet, but we'll build on this.

  • 2:34

    We're now ready to jump into what we're really interested in here--

  • 2:38

    the CSS.

  • 2:40

    We're going to approach this in a few steps.

  • 2:43

    First, we're going to get our panels looking correct,

  • 2:46

    then we're going to position them in 3d space,

  • 2:50

    and finally, we're going to add some animation.

  • 2:53

    To make our panels, or planes look right,

  • 2:56

    we need to apply some perspective to our 3d space.

  • 3:01

    So I'm going to go ahead and select our wrapper div,

  • 3:05

    and we'll type webkit-perspective:

  • 3:10

    and we'll use a value of about 800;

  • 3:13

    we'll give it a width of about 600 pixels and override the width there,

  • 3:20

    and we want to push it down a little bit from the top of the page,

  • 3:24

    so we'll give it a top margin of 150 pixels

  • 3:28

    and we'll do auto 0 auto on the left and right sides.

  • 3:33

    Now we're going to also add webkit-perspective-origin:

  • 3:42

    and we're going to give the 'x' value a value of 50% so that it's in the middle

  • 3:49

    and we're going to give the 'y' value a value of 90 pixels.

  • 3:54

    This new property, webkit-perspective-origin: takes an 'x' and a 'y' value.

  • 4:01

    This allows you to shift the origin of the perspective

  • 4:05

    independent of the 3d objects in the space.

  • 4:09

    We'll talk more about this later.

  • 4:11

    Next, we need to apply some CSS to our shape div.

  • 4:16

    so we'll go ahead and select that, and we'll center it with a margin: 0 auto

  • 4:26

    we'll give it a height of about 200 pixels, a width of 200 pixels,

  • 4:32

    so that it's square, and we'll apply a webkit-transform-style:

  • 4:39

    and we'll say preserve-3d;.

  • 4:43

    The webkit-transform-style property, when given the constant preserve-3d,

  • 4:49

    tells the element that it's being applied to

  • 4:52

    that all of its children should exist in the same 3d space.

  • 4:57

    If we didn't apply this to the shape div,

  • 4:59

    all of our child divs inside of it would be sandwiched together

  • 5:03

    into a single, flat, 2d plane,

  • 5:06

    which is not what we want.

  • 5:08

    The other possible value for the webkit-transform-style: property

  • 5:13

    is the constant flat.

  • 5:15

    Finally, we need to apply some styles

  • 5:17

    to our individual 2d planes

  • 5:20

    before we can position them in 3d space.

  • 5:23

    So we'll go ahead and select the .plane class

  • 5:28

    and we want to absolute position these,

  • 5:31

    so that they will stack on top of one another

  • 5:35

    We'll give them a height and width of 200 pixels as well,

  • 5:42

    and we'll give them a background color using the rgba color model

  • 5:49

    and we'll make them black,

  • 5:51

    and we will give them an opacity of about 60 percent.

  • 5:57

    We want the text inside of them, the numbers,

  • 6:00

    to be aligned center, and we want the numbers to be nice and large,

  • 6:06

    so we'll give it a font size of about ten em's,

  • 6:09

    and we'll make the numbers white,

  • 6:12

    since they're against a black background.

  • 6:15

    Now let's see what this looks like in the browser.

  • 6:18

    You can see that all eight of our planes

  • 6:21

    are stacked on top of one another.

  • 6:24

    This is because we set them all to be absolutely positioned,

  • 6:27

    so they don't flow around one another when we try to arrange them into a ring.

  • 6:31

    In the next video, we'll arrange our elements in 3d space

  • 6:35

    and then animate them using transitions and animations.

  • 6:39

    [?mellow guitar music?]

  • 6:42

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

Show full transcript


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

Sign up


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

Sign up


  • Nick Pettit

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