O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

transform-origin

Values:

[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length>? ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length>? ]

Initial value:

50% 50% 0

Applies to:

Block- and inline-level elements

Inherited:

No

Percentages:

Refer to the size of the element box

Computed value:

For <length>, an absolute length; otherwise a percentage

Description:

Defines the origin point for an element’s transforms in either 2D or simulated 3D space. The marked-as-optional <length> values are what define a 3D origin point; without them, the value is necessarily in 2D space.

Examples:

table th {transform-origin: bottom left;}
li {transform-origin: 10% 10px 10em;}

Note:

As of mid-2011, there were separate working drafts for 2D and 3D transforms, each of which defined its own value syntax for transform-origin. What is listed here is an attempt to harmonize the two without having to write out two separate but nearly identical value syntaxes.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required