Definition and Usage

• The transform-origin property allows you to change the position of transformed elements.
• 2D transformations can change the x
• and y-axis of an element. 3D transformations can also change the z-axis of an element.
• The transform-origin property is used to set the point around which a CSS transformation is applied. For example, when performing a rotate, the transform-origin determines around which point the element is rotated.

Note: This property must be used together with the Transform Property.

Property Values

|Property Value|Description| |—|—| |x-axis|Defines where the view is placed at the x-axis. Possible values:

• left
  
• center
  
• right
  
• length
  

• %
  	y-axis	Defines where the view is placed at the y-axis. Possible values:

• top
  
• center
  
• bottom
  
• length
  

• %
  	z-axis	Defines where the view is placed at the z-axis (for 3D transformations). Possible values:

• length
  	initial	Sets this property to its default value.
  	inherit	Inherits this property from its parent element.