CSS transform-origin Property

February 10, 2021 12:37 pm IST

You are Here:

CSS transform-origin Property

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

2D transformations can change the x- and y-axis of an element. Whereas, 3D transformations can also change the z-axis of an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; } #innerdiv{ color: #fff; text-align: center; line-height: 5; background: #0066ff; transform: rotate(50deg); -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; } </style> </head> <body> <h1>CSS transform-origin Property</h1> <div id="outerDiv"> <div id="innerDiv">HELLO</div> </div> </body> </html>

Run

Syntax

Using CSS

element{ transform-origin: 100% 100%; }

Using Javascript

object.style.transformOrigin="100% 100%";

Animatable

Yes, transform-origin property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS transform-origin property is 50% 50% 0.

Property Value

The following table provides a list of values for CSS transform-origin property.

Value	Explanation
x-axis	Specifies how far from the left edge of the box the origin of the transform is set. Possible values: left center right length %
y-axis	Specifies how far from the top edge of the box the origin of the transform is set. Possible values: left center right length %
z-axis	Specifies how far from the user eye the z=0 origin is set. Possible values: length

Using JavaScript

In the following example, we will demonstrate how to change the CSS transform-origin property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; } #outerdiv{ margin: 50px; } #innerdiv{ color: #fff; text-align: center; line-height: 5; background: #0066ff; transform: rotate(50deg); -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); } </style> </head> <body> <h1>CSS transform-origin Property</h1> <div id="outerDiv"> <div id="innerDiv">HELLO</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[1]; function myFunction(){ x.style.transformOrigin = "100% 100%"; x.style.WebkitTransformOrigin = "100% 100%"; x.style.msTransformOrigin = "100% 100%"; } </script> </body> </html>

Run