CSS3 Idea: Rotation of Page Elements

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

There is discussion about making rotation part of the CSS3. Here are some important points:

There are two types of rotation: rotation that happens during layout (and pushes aside content below it), and rotation that happens after layout.

width: auto on a rotated element means use the available width before rotation.

width: max-intrinsic; rotate: rotate-to-fit-keyword enables the case where we shrinkwrap around the text to find its width and pick the smallest angle that will make that block fit.

width: shrinkwrap uses the available space after rotation, starting with one line and making the block taller and narrower as more content comes in, until it reaches its minimum content width (or min-width).

image-orientation accepts all angles, rounds to nearest increment of 90°, and spec says authors SHOULD NOT specify angles other than increments of 90°.

I feel rotation should absolutely be a part of CSS specs going forward. We should have that kind of design control without having to sacrifice usability.