transform-origin Property in CSS
February 16, 2021

transform-origin property to me is like hanging the object on a point and then using that point as a center to move the object.

The transform-origin property let us change the position of elements with transform property set.

If we have elements with 2D transformations set then we can pin the transform-origin point to move those elements in x- and y-axis. We can also do that for z-axis if we have 3D transformations set for an element.

transform-origin property has a default values of 50% 50% 0

That value is always set unless we define something else to be set.

As we can see that by default it pins the elements in the center of the element so when we ONLY specify the transform property, it will adjust according to that default pin set.

And if we move that pin using transform-origin property then it will use that new pin point to adjust the elements on x or y or z axis depending on the transform-origin property value.

All major browsers support it so feel free to use it.


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

x-axis and y-axis possible values are left, center, right, length and % but for z-axis only one possible value is length.


transform-origin: center

transform-origin: top left

transform-origin: 25% 25%

transform-origin: top left, transform: skewX(50deg)

Source: w3.org


What others are saying...

  1. Macy says:

    thank you for easy examples


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

What is PostgreSQL? How similar or different it is from SQL?Postgres3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow to create two segues with two UIButtons on a single page (Swift 5.0)?SwiftWordPress: How to display slider repeater fields in ACF?WordPressSQL ALL OperatorSQL/MySQLFull and Partial CUBE in Postgres with ExamplesPostgres
%d bloggers like this: