CSS transform-origin Property

❮ Previous Reference Next ❯


#div2 {
  transform: rotate(30deg);
  transform-origin: 20px 40px;


The transform-origin property sets the origin for an element's transformations.

Default value:50% 50% 0
JavaScript syntax:
object.style.transformOrigin="x-axis y-axis z-axis|initial|inherit|revert|revert-layer|unset";

Standard Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
x-axis Specifies where the view is placed at the x-axis.

Possible values:

  • left
  • center
  • right
  • length
  • %
y-axis Specifies where the view is placed at the y-axis.

Possible values:

  • top
  • center
  • bottom
  • length
  • %
z-axis Specifies vwhere the view is placed at the z-axis (for 3D transformations).

Possible values:

  • length
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  transform-origin: 50% 50% 0;
❮ Previous Reference Next ❯