Transform-origin - Property CSS

Syntax diagram of transform-origin.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• x, y and z are numeric values followed by one of CSS dimension units, or, for x and y, percentages.

Description of the transform-origin property.

transform-origin defines the origin point for transformations, that is to say, the point that remains fixed during the transformation. For example, in the case of a rotation, the origin point will be the center of rotation. When the transformation is a translation, the origin point is of no importance.

Also refer to the transform-box property, which defines the reference box for transform-origin.

A more general presentation on transformations can be found on the page of the property transform.

Values for transform-origin.

• transform-origin: left center; x y

  The origin point of the transformations is positioned relative to these two values. The first value (x) defines the horizontal position, and the second value (y) defines the vertical position. If only one value is given, the other is taken as center.

  x can take the values left, center, or right.
  y can take the values top, center, or bottom.

  transform-origin:left top;

  transform-origin:left;
• transform-origin: 100px 20px; x y

  The origin point is positioned based on these two values. These are two positive or negative numbers, followed by a unit of measurement (see CSS dimension units). If only one value is specified, it applies to the horizontal position, the vertical position being assumed equal to center. These values can be negative or greater than the dimension of the element, which sets an origin point outside of the element.

  If these are percentages, they are calculated relative to the dimensions of the reference box, the latter being defined by the property transform-box. The first percentage (x) is calculated relative to the width of the reference box, and the second (y) relative to the height of the reference box.

  transform-origin:40px 10px;

  transform-origin:20% -20%;
• transform-origin: 100px 20px 10px; x y z

  A third value can be indicated, it defines the height of the origin point (along the Z-axis, perpendicular to the screen). A positive value indicates an origin point above the plane of the screen, while a negative value indicates an origin point deeper than the plane of the screen.

  This z value is a number followed by a unit of absolute dimension. Percentages are not allowed for the z value. When it is not specified, this third value is set to 0px by default.

  The first two values can take all the values defined previously.

  A perspective effect has been added to the example below.

  transform-origin:left center 50px;
• transform-origin: initial; (50% 50%) transform-origin: inherit; transform-origin: revert; transform-origin: revertLayer; transform-origin: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the transform-origin property.

The example below shows two animations: one on the property transform, which produces a rapid rotation of the element, and the other on the property transform-origin. These two animations have different durations, which gives the impression of an unbalanced, shaky rotation.

Simulator.

The simulator below uses animations to illustrate transform-origin. To observe the effect of the Z value, choose "Rotation around the X-axis" or "Rotation around the Y-axis".

Browsers compatibility with transform-origin.

Transformations, and therefore the property transform-origin, are now correctly supported by all browsers.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1

2D
transformations

2

3D
transformations

3

transform-origin
property

Estimated overall support.

97%

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the transform-origin property.

• CSS Transforms Module Level 1

  This specification module defines 2D transformations (in the plane of the screen) that can be applied to elements with the transform property.
  It also defines functions related to transformations (translation, rotation, scaling, and zoom effect).

  Regarding transform-origin. First definition of properties relating to transformations in CSS, including transform-origin.
  

  February 28, 2012

  Working Draft.

  

  February 14, 2019

  Candidate Recommendation.

  

  

• CSS Transforms Module Level 2

  In addition to the 2D transformations already presented in level 1 of the specification, this module deals with 3D transformations. It introduces new properties to manage the viewpoint height and the rendering of 3D effects.
  This module also introduces the individual properties of rotation, translation, and zoom effect.

  Regarding transform-origin. Introduction of 3D transformations.
  No change directly affecting the transform-origin property.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, regarding the transformations.

The CSS Transforms Module describes the property transform-origin, and also includes all definitions concerning CSS transformations:

Properties:

backface-visibility

Visibility of the rear side of the element (while it is rotating).

perspective

A perspective effect applied to a 3D transformed element.

perspective-origin

Position of the observer in the case of a 3D distortion with perspective.

rotate

Defines a rotation to apply to the element.

scale

Sets a scaling of the element (magnification or shrinking).

transform

Applies one or more geometric transformations (rotations, enlargements, etc.).

transform-box

Sets the reference box for transformations.

Transform-origin

Sets the origin point for transformations.

transform-style

Defines how elements that undergo a 3D transformation are rendered.

translate

Applies a translation to an element (a linear displacement).

Functions:

matrix()

Applies a composite transformation to an element (translations, rotations...).

matrix3d()

Applies a series of 3D transformations to an element.

perspective()

Sets the height of the observer in the case of a 3D transformation.

rotate()

Sets a rotation to apply to the element in 2D (in the plane of the screen).

rotate3d()

Defines a 3D rotation to be applied to an element around any axis in 3D.

rotateX()

Defines a rotation of the element around the X-axis (in 3D),

rotateY()

Sets a 3D rotation of the element around the y-axis.

rotateZ()

Sets a rotation of the element around the z-axis.

scale()

Sets a magnification or reduction of the element.

scale3d()

Sets 3D scaling.

scaleX()

Sets X-axis scaling.

scaleY()

Set Y-axis scaling.

scaleZ()

Set Z-axis scaling.

skew()

Sets a tilt of the element along the X and/or Y axes.

skewX()

Sets a tilt of the element along the X-axis.

skewY()

Sets a tilt of the element along the Y-axis.

translate()

Defines a translation (a linear move) to an element.

translate3d()

Defines a 3D translation along one or more of the X, Y, and Z axes.

translateX()

Defines a translation along the X-axis (horizontally).

translateY()

Defines a translation along the Y axis (vertically).

translateZ()

Defines a translation along the Z axis (perpendicular to the screen).