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

6:45

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

  • 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