Web Structure

Web Structure

New

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

The Box Model

The Box Model

New

1:54

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

CSS Layout

CSS Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Width & Height Units

Width & Height Units

New

3:59

Positioning Overview

Positioning Overview

New

1:48

Intro to 3D

Intro to 3D

New

2:25

Images & Colors

Images & Colors

New

Image Resolution

Image Resolution

New

3:28

Image File Types (GIF, PNG, SVG, JPEG)

Image File Types (GIF, PNG, SVG, JPEG)

New

2:22

Color values (HEX, RGBA, color names)

Color values (HEX, RGBA, color names)

New

3:22

Dynamic Content

Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

SEO

SEO

New

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

New

1:34

Intro to 301 Redirects

Intro to 301 Redirects

New

2:39

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.