New CSS rotate syntax

In the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate.

This pen by Wes Bos demonstrates the new rotate syntax (use Canary):

css-rotate

See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen.

So how exactly is said syntax? Here’s a snippet from the spec:

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a “2d rotation” in the plane of the screen.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.