3D web design for beginners – Webflow CSS tutorial

Articles, Blog

3D web design for beginners – Webflow CSS tutorial

3D web design for beginners – Webflow CSS tutorial

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.

24 thoughts on 3D web design for beginners – Webflow CSS tutorial

  1. Cool video. Would be awesome to see another tutorial on how to integrate Verge3D interactives to Webflow pages.

  2. (Looking at a business card) Look at that subtle off-white coloring. The tasteful thickness of it. Oh my God, it even has a watermark.

Leave a Reply

Your email address will not be published. Required fields are marked *