Intro to 3D

In this article we’ll cover some fundamental 3D concepts on the web. Check out the 2D & 3D transforms guide to learn how to put these concepts into practice on your Webflow project.

In this lesson:

1. Understanding 2D basics
2. Movement along the X- and Y-axis
3. Introducing the Z-axis
4. Parallax overview
5. 2D objects in 3D space

Understanding 2D basics

Before we get to three dimensions, we first have to understand how the first two dimensions work. We’re talking specifically 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 2D elements. That includes anything you see on a website like images, headings, paragraphs, and buttons. The width and height of these elements and the distances between them and other elements all take place in two dimensions. There’s no actual depth.

Movement along the X- and Y-axis

When elements move horizontally, we’re adjusting its X-position. And when we’re moving vertically, we’re adjusting its Y-position. When we’re moving diagonally, we’re using combinations of X and Y.

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

Introducing the Z-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, we’ll use that as an example. Not everything 3D has to be an extrusion, or a 3D object. We can actually take individual 2D elements and interact with them inside 3D space, along the Z-axis. We can move them, rotate them — we can do whatever we want with them.

Parallax Overview

One of the best things about 3D motion is the idea of parallax. In the example below, we have cards propped up on a table to illustrate parallax. None of the cards are moving; we’re just shifting the camera left and right. We’re only moving the camera or our field of view along the X-axis.

Notice how the business cards closest to us appear to be moving more quickly. And the cards in the distance seem to be moving more slowly. That displacement, or difference between the speeds of those objects in nearer and farther to us, is parallax.

2D objects in 3D space

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.