CSS Transform Origin Property

The CSS transform origin property defines the point from which a CSS transform is applied to an element.

Transform Origin Syntax

The syntax for identifying the value of the transform-origin property takes into account the x-offset and y-offset of the point of origin. The x-offset is a length or percentage from the left edge of the element. Correspondingly, the y-offset is a length or percentage from the top edge of the element.

transform-origin: x-offset y-offset;

The default value for the transform-origin property is the center of an element (50% 50%).

Any unit that can be used to define the length of an element (px, em, rem, percentage) can be used to identify the x-offset and y-offset values of the transform-origin property. Additionally, there are several keywords that are acceptable for use with the transform-origin property:

• left (0%)
• center (50%)
• right (100%)
• top (0%)
• bottom (100%)

Examples

For context, the examples included here show a faded version of the box in it’s original position, prior to the transform, behind each transformed element.

Rotate

Rotate 25 Degrees to the Left with Transform Origin at Top Right

.box { 
      transform: rotate(-25deg); 
      transform-origin: 100% 0%;
} 

Rotate 25 Degrees to the Left with Transform Origin at Bottom Right

.box { 
      transform: rotate(-25deg); 
      transform-origin: right bottom;
} 

Scale

Scale to 50% with Transform Origin at Top Right

.box { 
      transform: scale(0.5); 
      transform-origin: 100% 0%;
} 

Scale to 50% with Transform Origin at Bottom Right

.box { 
      transform: scale(0.5); 
      transform-origin: right bottom;
} 

Skew

Skew 25 Degrees to the Left with Transform Origin at Top Right

.box { 
      transform: skewX(25deg); 
      transform-origin: 100% 0%;
} 

Skew 25 Degrees to the Left with Transform Origin at Bottom Right

.box { 
      transform: skewX(25deg); 
      transform-origin: right bottom;
} 

Translate

You’ll notice that when the transform-origin property is applied to a translate transform function that there is no apparent visual difference in the outcome. This is because the element impacted by the transform is moved without changing it’s shape, size, or rotation.

Translate 1em to the Bottom Right with Transform Origin at Top Right

.box { 
      transform: translate(1em, 1em); 
      transform-origin: 100% 0%;
} 

Translate 1em to the Bottom Right with Transform Origin at Bottom Right

.box { 
      transform: translate(1em, 1em); 
      transform-origin: right bottom;
} 

Browser Support

CSS transform-origin is supported in all major browsers including Internet Explorer 9 and above. There are a handful of browser prefixes that are required for full cross-browser support (listed below).

It’s also important to note that though 3d transforms are not yet fully supported, they can be use in quite a few browsers now. With 3d transforms, a third value is accepted through the transform-origin property that represents the z axis.

Prefix Requirements

• -ms-
• -webkit-