How To

Fancy 3D CSS that’s surprisingly easy to use

5 Aug , 2017  

Ok, today’s post is all about having some fun with CSS. Specifically, 3D CSS.

We already know that we can use CSS to style document colors, change typefaces and lay out page elements.

That’s cool, but we can do so much more! How about transformations in three dimensions? Or re-creating the Star Wars introduction?

And the best thing is – these “advanced” techniques are actually super easy.

Here’s what you’ll learn today:

  • How the 2D CSS coordinates plane works
  • Transformations you can apply in two dimensions
  • What the 3D CSS coordinates plane looks like
  • The importance of perspective for 3D transformations
  • Transformations you can apply in three dimensions
  • Ideas for the tasteful application of 2D and 3D CSS transforms

Sound fun? Let’s get started.

3D CSS transformations

2D CSS

Before we hop into the three-dimensional CSS effects, we need to check out how these things work in two dimensions.

Fundamental CSS concepts for two-dimensional transformations

Does this look familiar? It reminds me of my high-school calculus classes (don’t worry, there’s no calculus here!):

2d space for css

Well here’s a div that’s been positioned with top: 200, left: 100, and is 100 pixels on each side:

DIV in 2d css space

So that’s not so bad, right? The Y is the vertical position of the div, and the X is the horizontal position of the div.

Great! When we’re working in 2D, this is the space we operate in.

Let’s see what we can do with it.

2D CSS Transformations

The heart & soul of these CSS techniques is the transform rule. The transform rule takes one or more commands (officially functions) to do something.

Moving elements with CSS

Set’s say we’ve positioned a div, and now we want to move it. Moving things is done with the translate command. We could move our div like this:

transform: translate(100px, 10px);

The translate function has two arguments: how much to move in the x direction (side to side) and how much to move in the y direction (up and down).

If the x value is positive, it’ll move the element right; negative values move it left.

For y, positive values move down, and negative values move the element up.

You can see how the example transform rule above looks below (click CSS to see the styles).

If we use negative values, you can see the div disappearing off the edge:

There are also versions of translate for moving in one direction only: translateX and translateY.

Rotating elements with CSS

That’s OK, but we can move things around the page by setting margins, or using position: absolute, right?

How about rotating them instead?

For this we use the rotate command in with transform:

transform: rotate(45deg);

Note we use degrees with rotate, hence 45deg. Here’s an example of it in use:

You can see that the corners of the div are disappearing off the edge.

That’s because the div is located in the top left an we haven’t given it enough room on the top or left to rotate without being clipped.

Of course, the cool thing is that whatever’s inside the div is rotate as well. So let’s put something inside the div:

Note that I rotated the div in the opposite direction using a negative value (check the CSS tab to see) – because that emoji snowboarder was going in the wrong direction!

Multiple CSS Transforms

Now you know how to CSS transformations to a page element, let’s see how we combine them.

Because it’d be no fun to only be able to rotate, only move etc, right?

Fortunately, it super easy to do lots of transformations at the same time – we just give the transform rule lots of commands:

transform: rotate(-20deg) translate(20px, 20px);

Which looks like this:

Other CSS transformations you should know about

Moving and rotating are great, but there’s a lot more to learn about 2D CSS transformations. Some interesting ones you should check out are:

  • Scale – for making elements larger or smaller
  • Skew – imagine you grab the top of your element and yank it left, while you yank the bottom of your element right. That’s skew, and you can see where I used it here.

For an exhaustive list of what you can do with CSS transformations, check out good old MDN (Mozilla Developer Network).

3D CSS

Time to add another dimension! Three-dimensional CSS transformations work very similarly to 2D transformations, but there’s one concept we need to understand first – where are you standing?

Getting some perspective for 3D CSS

There’s something quite simple about dealing with two dimensions that we never really think about – it always looks the same, no matter what angle you view it from.

But when we add a third dimension suddenly our viewing perspective matters.

Let’s say you go to Paris to look at the Eiffel Tower.

Go right up close to it, and it’s going to look like this:

But if we back up a bit, then we can see the tower a little more clearly:

And of course if we move back like, 10 blocks (and sprout some wings), then we can see this:

So that’s perspective.

What we’re really doing is moving backwards in our third dimension. You remember how we were looking at the 2D space for CSS before?

DIV in 2d css space

When we add a third dimension, it looks like this:

3D CSS space

As you can see, the third dimension is called z, and you may have run into it before with the CSS z-index rule, which we use for putting elements above or below each other.

This is important because when we use perspective in 3D CSS transformations, we’re placing our eye on that z-axis. A small value will bring us closer, and a large value further away:

CSS 3D with perspective

Using perspective with 3D CSS transformations

Sooo, let’s see how that plays out in some CSS. Here’s an example below:

In this example you can see that one side of our blue div appears closer than the other.

That’s because we used the following to transform it:

transform: rotateY(20deg) translate(80px, 30px);

So why did one edge come closer?

Because we rotated around the y-axis (the vertical axis), the left side came closer, and the right side receded.

Of course, if we’d rotated by -20 degrees instead, the opposite would have happened.

If we rotated around the x-axis (which is horizontal), the top and the bottom of the div would approach and recede.

Let’s take a look at that CSS again:

#fancy-frame {
  perspective: 200px;
  font-size: 6em;
}

#fancy {
  background-color: #0df;
  width: 200px;
  height: 200px;
  transform: rotateY(20deg) translate(80px, 30px);
}

Note: I’ve excluded the #fancy div rule from the above excerpt, since it’s just there to position that joystick emoji in the middle of the div.

Anyway! We have two main styles here – one is #fancy-frame which has perspective set to 200px. The other rule, #fancy (you can see how long I spent thinking about these names!) applies the transform rule to rotate and move our div.

If we remove perspective from #fancy-frame, none of this works.

Of course, we can apply multiple rotations to our object as well.

This time it’s rotated through the x, y and z axes (actually, z-axis rotation looks just like normal 2D rotation, since it doesn’t bring anything closer or further away) with the following rule:

transform: rotateX(20deg) rotateY(20deg) rotateZ(25deg) translate(80px, 30px);

It looks like this:

Let’s play with CSS perspective

What if we reduced the perspective rule in #fancy-frame to 50px?

Take a look at this:

It appears to have exaggerated the effect – this is the best the browser can do to make us feel ‘closer’ to the object.

And if we move back a bit:

With perspective set to 1000px, the effect is reduced to almost nothing, because we’re so ‘far away’.

This leads us to an opportunity that’s far too good to pass up.

How about some Star Wars action?

If only we had a starfield handy…Oh wait – here’s one! (Creative Commons licensed from awesome Flickr user sagesolar)

Yeeeeeeah, that’s more like it!

Anyway, if you’ve had a look at the CSS, you’ll see this is just a div that’s been tilted along it’s y-axis. Filming the original opening crawl was waaay harder.

Legitimate use of fancy CSS

So that’s fun, right?

The thing is, these effects are cool, but they’re not great for usability.

Doing your whole homepage in the Star Wars crawl style would make it really hard to read.

But what these techniques are great for is creating small points of difference to make some elements stand out.

A simple example, using boring old 2D rotate can help spruce up a blockquote:

Another option is using animations to provide hints about the user interface.

The easiest way to get started here is to use the :hover pseudo-class. Here’s an example:

This is a simple, unique and not over the top way to indicate that something will happen if you click one of those options.

What’s the next step for CSS transformations?

This has been a super quick, but fun (I hope!) look at 2D and 3D CSS transformations.

We’ve seen how they can be used for extreme effects, and also how they can add small elements of difference in a design or user interface.

You’ll notice that we haven’t used any JavaScript yet. The next step is to see what we can do with simple JavaScript animations to create more elaborate – but useful – transformations.

See you next time!

By


2 Responses

  1. jj says:

    Good article thanks. I use transform a lot in my designs because its cheaper than downloading a custom image and animating it.

Leave a Reply

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