Unfolding the Box Model

Exploring CSS 3D Transforms

Darn, your browser seems unable to display 3D Transforms.

Use the ‹ and › keys
to advance backward and forward.

Here is our dear friend, the DOM element.

For so long, we've had limited options: floats and positioning

Web design is the ever-evolving art

of placing DOM elements on the page

Quinoa portland farm-to-table retro, put a bird on it mlkshk tattooed flannel actually high life carles semiotics iphone. Single-origin coffee blue bottle helvetica, neutra letterpress typewriter cardigan ethical. Selvage bushwick american apparel next level.

Jean shorts whatever blog bushwick. Actually godard pitchfork, neutra bushwick dreamcatcher pour-over farm-to-table food truck banjo authentic occupy mlkshk vice. Farm-to-table brooklyn cosby sweater, tattooed stumptown keytar.

However, there's a feature of CSS that unlocks a whole new dimension:

CSS 3D Transforms

3D Transforms let you translate and rotate DOM Elements.
There are three axes: X, Y, Z

Combined with some settings that control perspective,
3D transforms will make your DOM Elements jump out of flatland!

transform-style
A value of preserve-3d tells the browser you want 3D.
perspective
An integer representing distance from camera. Measured in px.
perspective-origin
Specifies the vanishing point of the perspective effect.

These settings go on the element you want to transform:

translate()
Moves elements in space.
rotate()
Rotates elements in space.
backface-visibility
Specifies if you can see this element when it is not facing you.

Transforms are inherited by children.
You can think of nested elements

You can use this inheritance to simulate more complex objects

This slinky is not a spiral, but numerous nested <div>s

A solar system only needs one element per celestial body.

You can also incorporate transformed elements into images.

If you can read this, it means your browser cannot process the 3D transforms on this page.
There's no good fallback behavior, so I put this message here to let you know what happened.

You can combine transforms with other CSS to create interesting effects

(move your mouse around!)

Back
Middle
Front

Back to our humble friend:

We now have a whole new world for it to explore.

Transform properties

  • translate()
  • rotate()
  • transform-origin
  • backface-visibility

Container properties

  • perspective()
  • perspective-origin()
  • transform-style()

Wall o' links 'n' resources:

the beginning