transform-origin

Redirected from En/CSS/-moz-transform-origin

Table of contents

  1. 1. Summary
  2. 2. Syntax
    1. 2.1. Values
  3. 3. Examples
    1. 3.1. Live Examples
  4. 4. Browser compatibility
    1. 4.1. Notes
  5. 5. Specifications
  6. 6. See also
Page Notifications Off

Summary

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

  • Initial value : 50% 50%
  • Applies to: all block level and inline level elements
  • Inherited : no
  • Percentages: refer to the size of the box itself
  • Media: visual
  • Computed value : for <length> the absolute value, otherwise a percentage

Syntax

transform-origin:  [ <percentage> | <length> | left | center | right ]
                   [ <percentage> | <length> | top | center | bottom ] ?

transform-origin:  [ left | center | right ] || [ top | center | bottom ]

Values

Accepts one or two values.

  • One single value sets the horizontal position, the vertical position is set to 50%.
  • Two values apply first to the horizontal and second to the vertical position.

Combinations are allowed of keyword, <length> , or <percentage> values, but if keywords are mixed with other values, left and right may only be used as the first value, and top and bottom may only be used as the second value. Negative positions are allowed.

<percentage>
With a value pair of 0% 0%, (or just 0 0) the transform-origin is the upper left corner of the box. A value pair of 100% 100% places the transform-origin to the lower right corner. With a value pair of 14% 84%, the point 14% across and 84% down the box is the transform-origin.
<length>
With a value pair of e.g. 2cm 1cm, the transform-origin is placed 2cm to the right and 1cm below the upper left corner of the element.
top left | left top
Same as 0 0
top | top center | center top
Same as 50% 0
right top | top right
Same as 100% 0
left | left center | center left
Same as 0 50%
center | center center
Same as 50% 50% (default value)
right | right center | center right
Same as 100% 50%
bottom left | left bottom
Same as 0 100%
bottom | bottom center | center bottom
Same as 50% 100%
bottom right | right bottom
Same as 100% 100%

Examples

See Using CSS transforms for examples.

Live Examples

transform: none;
 
transform: rotate(30deg);
 
transform: rotate(30deg);
transform-origin: 0 0;
 
transform: rotate(30deg);
transform-origin: 100% 100%;
 
transform: rotate(30deg);
transform-origin: -10em -30em;
 
transform: scale(1.9);
 
transform: scale(1.9);
transform-origin: 0 0;
 
transform: scale(1.9);
transform-origin: 100% -30%;
 
transform: skew(50deg);
 
transform: skew(50deg);
transform-origin: 0 0;
 
transform: skew(50deg);
transform-origin: 100% 100%;
 

Browser compatibility

  • Desktop
  • Mobile

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) -moz yes -webkit 9.0 -ms 10.5 -o 3.1 -webkit
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support ? ? ? ?

Notes

Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

Tags (4)

Edit tags

Attachments (0)

 

Attach file