Grokking CSS 3D transforms (Part 1)

Every time I search the web for advice and usage on CSS 3D transforms I get the same vaguely helpful search results. So I’m making my own guide.

Firstly, What Support Is There For This?

It turns out there’s a really nice chart. But all you need to know is:

  • Yes you can. Most modern browsers (including Firefox!) support 3D.
  • Just be sure to include additional -webkit prefixed attributes.

What Is The Most Basic Example?

The following. It 1) sets up a viewport with a not-horrible perspective and 2) rotates a DIV on its Y axis.

I am a div, 200×200!

You must first set up a perspective so the browser knows how to calculate depth. This example uses a perspective: 1000.

What does the value mean? It is the distance from the “edge” of the screen (i.e. your face) to the axis. The DIV in the square is 200×200 and rotated around the Y axis by 45 degrees. That means: 100px of the DIV is on the side of the axis towards your face, and 100px of the DIV is behind the axis towards the distance.

So, if you set the perspective: 100 then you get a really funny distorted effect because the distance from the axis to your nose is almost the same as 100px that is on your side of the Y axis. Check it out:

 

 

I am a div, 200×200!

 

What Is The Best Way To Calculate The Perspective Value?

Estimate what is the maximum # of pixels you’d want to have pointed at your nose and add at least 500. Yes, I made that up, but it seems to work. e.g. if you are rotating a DIV that is about 500px wide, that means 250px of it will be rotated towards you, so you should use at least 750.

And, yes, the perspective number is a number not a pixel value.

What Are the Axis?

  • Rotating about the X axis flips the top edge of the DIV away from you
  • Rotating about the Y axis twists counter-clockwise around the vertical center
  • Rotating about the Z axis spins clockwise around the visual center
X rotation
Y rotation
Z rotation

So, you would use the rotateX() if you want to make a DIV lay flat, a rotateY() to twist a DIV like a door, and rotateZ() to spin the DIV.

Where Are The Axis?

The X and Y axis are in the middle of the DIV in the vertical and horizontal directions, respectively. If you have a DIV that is 200px high, the X axis passes through at about 100px from the top or bottom edge. Likewise, if you have a DIV that is 300px wide, the Y axis passes through at about 150px from the left or right sides.

How Do You Center A DIV?

Exactly like you would have to if you are doing absolute positioning. Take for example a viewport that is 500px wide and 400px high. The exact center would be at 250px from the left and 200px from the top:

x

… but if you put a DIV that is 80px wide by 60px high absolutely positioned at left:250px and top:200px it won’t be centered:

x

Worse yet, if you twist it around the Y axis, it’ll just twist around its own horizontal halfway point (effectively 250px + 80px/2 = 290px):

x

So, to twist it in the exact center, first think about centering the DIV as you normally would before applying 3D transformations. In this case that means setting the left position to 210px (250px – 80px/2 = 210px) and the top to 170px (200px – 60px/2 = 170px):

x

OK, the next article will talk about how to construct a rectangular 3D box.