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.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

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.

Related tutorial

Intro to 3D

2:25