CORE CONCEPTS

CORE CONCEPTS

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Style Manager

Style Manager

New

1:56

Text Style Inheritance

Text Style Inheritance

New

3:18

Interaction

Interaction

New

States

States

New

2:47

Transitions

Transitions

New

2:40

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

16:00

16:00

Styling Across Breakpoints

Styling Across Breakpoints

New

Typography Styles

Typography Styles

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

Effects

Effects

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Color

Color

New

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

With the vast majority of the web existing squarely in two dimensions, expanding your design practice into 3D can take some time to wrap your head around. In this video, we'll explain some of the basic concepts behind working with 3D on the web. We'll expand on this info in our videos on 2D & 3D transforms and 3D perspective.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

Before we get to three dimensions, let’s talk about the first two. Of course, that means we’re talking about horizontal motion along our X-axis, and vertical motion along our Y-axis.

Most of the content on the web is made up of two-dimensional elements:

Properties that relate to width and height: 200 pixels wide, 400 pixels tall.

Distances relative to another element: 30 pixels from the top, 60 pixels from the left.

But of course all this is taking place in two dimensions. There’s no actual depth.

When we’re moving horizontally, we’re adjusting our X-position.

And when we’re moving vertically, we’re adjusting our Y-position.

When we’re moving diagonally, we’re using combinations of X and Y.

So that’s our positioning in two dimensions: the X-axis and the Y-axis.

Now let’s talk about our third dimension: The Z-axis. Of course, when we’re dealing in three dimensions, we’re not just moving left and right and up and down; we’re dealing with depth.

And because the web is made up of a lot of these 2D elements, let’s start there. Not everything 3D has to be an extrusion. Individual 2D elements? They don’t need depth for us to be able to interact with them inside 3D space. We can move them, rotate them — we can do whatever we want with them.

But one of the best things about 3D motion is this idea of parallax.

These cards are propped up here on a table. And what we’re going to do is move our field of view down here in front of the cards.

Now. None of these cards are moving; we’re just going to shift the camera, we’re going to move it to the left and right. We’re only moving the camera—we’re moving our field of view along the X-axis. But notice how the business cards closest to us appear to be moving more quickly. And of course, the cards in the distance seem to be moving more slowly (than the cards closer to us). That displacement—that difference in apparent speed based on those distances? That’s parallax.

The magic here is that none of these cards has any depth whatsoever. From the side, they disappear. The key is that 3D motion doesn’t always need 3D objects.

That concept of parallax motion can give our projects a bit of depth. Moving different elements at slightly different velocities can really set the stage for that 3D look.

But that’s the groundwork. Positioning and rotation and motion along the X-axis, the Y-axis, and of course, the Z-axis. Those are the primary aspects we like to work with — and explore — when we’re thinking about designing in three dimensions.