2.5: Transform-origin Property

Transform-origin

The transform-origin property is a helper property. It is used in conjunction with other functions like rotate().

Imagine this scenario. You’ve got a square that you put on a corkboard with a pushpin. But you don’t push the pin all the way into the board…you let the square have a little space to rotate.

Your square will then move around the pushpin (the origin point) as you move the square on the board. If you pick up the pin and move it to a different location, the square will then rotate around that new location.

In the example to the below, you'll see four different graphics. The 'original' is our square without any rotation applied to it. Hidden behind this original blue square is a gray square. This gray square will stay in place as we rotate the blue one. Because the gray square doesn't move, you can use this as a visual reference to see what the blue square will be doing.

In the top right of the example, there is a red push pin in the center of the boxes. This shows the location of the origin point. (Note - This is also called the 'transform origin' in some literature. We'll be using "origin point" for this class.)

So, the transform-origin property spins an object around its origin point.

Definition: Transform-origin property

The transform-origin property spins an object around its origin point.

Definition: Origin Point (aka transform origin)

The origin point (aka transform origin) is the point around which a transformation is applied.¹

By the way, the default origin point is the center of any object.¹ So, the only time you'll define that an object should rotate at its center point is after you made it rotate at a different point, and then you need to have it return to the center point.

Definition: Default Origin Point

The default origin point is the center of any object.¹

Here's the syntax for defining the properties of transform-origin:²

Concept: Transform-origin syntax

Basic syntax:

transform-origin: x-axis value | y-axis value | z-axis value;

You can use keywords like this:

transform-origin: top left; (Just the x and y are set)

Plus, you can use percentages and specific lengths like this:

transform-origin: 50% 75% 5cm; (All three values are set)

Both the x and y values can be set with keywords, a specific length, or a percentage.² Here is what you can use for these:²

X-axis values:

• Keywords: Left, Center, or Right
• Specific Lengths: mm, cm, inches, etc.. See the article from Mozilla for more.
• Percentages

Y-axis values:

• Keywords: Top, Center, or Bottom (notice how these are different than the x-axis values!)
• Specific Lengths: mm, cm, inches, etc.. See the article from Mozilla for more.
• Percentages

Z-axis values: The z axis value is different. This one only has a length that is specified.²

• The z axis is a little different. It can only be set with a length.
• Also, this value can be left off if you don't need to work in 3D.²

The z axis value is different. This one only has a length that is specified and that value can be left off if you are working in 3D.

It's time to work with CSS! Here is our first exercise.

Exercise \(\PageIndex{1}\)

1. Set the transform-origin with the following values: x-axis = top, y-axis = right.
2. Set the transform-origin with the following values: x-axis = 20%, y-axis = 60%.
3. Set the transform-origin with the following values: x-axis = 1cm, y-axis = 2cm

See the Pen transform-origin by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Answer

1. transform-origin: top left;
2. transform-origin: 20% 60%;
3. transform-origin: 1cm 2cm;

---

Footnotes

1. “Transform-Origin - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/...ansform-origin.

2. "CSS Transform-Origin Property." W3 Schools, https://www.w3schools.com/csSref/css...orm-origin.php.