CSS transform-origin

The CSS transform-origin property is used to set origin of the transformed element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{border: 3px dotted coral; margin-bottom: 12px;}
      .a, .b, .c, .d{width: 200px; height: 100px; background-color: gainsboro;
         transform: skewX(25deg);}
      .b{transform-origin: top left;}
      .c{transform-origin: 0px -120px;}
      .d{transform-origin: 0% -20%;}
   </style>
</head>
<body>
   
   <h2>Without transform-origin</h2>
   <div class="myd">
      <div class="a"></div>
   </div>

   <h2>transform-origin: top left</h2>
   <div class="myd">
      <div class="b"></div>
   </div>

   <h2>transform-origin: 0px -120px</h2>
   <div class="myd">
      <div class="c"></div>
   </div>

   <h2>transform-origin: 30% -20%</h2>
   <div class="myd">
      <div class="d"></div>
   </div>

</body>
</html>

Output

Without transform-origin

transform-origin: top left

transform-origin: 0px -120px

transform-origin: 30% -20%

Note - The transform-origin property comes with the transform property.

Note - The skewX() function skews an element horizontally.

CSS transform-origin Syntax

The syntax of transform-origin property in CSS, is:

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

The x-axis parameter is used to define the origin of a transformed element on x-axis. And the value should be any of the following:

left
right
center
length

Note - The left, right, and center are keywords, whereas length are used to define custom position like 20px, 34% etc.

Similarly the y-axis parameter is used to define the origin of a transformed element on y-axis. And the value should be any of the following:

top
bottom
center
length

Again in similar way, the z-axis parameter is used to define the custom origin of a transformed element on of course z-axis. And the value that can be used is custom length like 12px, 20%, 1.2em etc.

Note - The initial and inherit keywords can also be used to define the transform-origin property. The initial is used to use the default value, whereas the inherit is used to use the value inherited by the parent element.

Now the question is, what if user provides one or two values to transform-origin property ?
The answer is: it depends on values, if user uses keywords. And if user uses lengths like 20px, 34%, 2.3em etc., then in that case, the first value goes to x-axis, second value goes to y-axis, and the third value goes to z-axis.

For example:

transform-origin: top left;

The top assigns to y-axis, and left assigns to x-axis. Another example is:

transform-origin: right top;

The right assigns to x-axis, and top assigns to y-axis. And if we use custom length like pixels or percentage, for example:

transform-origin: 12px;

The value assigns to x-axis. Here is another example:

transform-origin: 2cm 120px;

2cm assigns to x-axis, whereas 120px assigns to y-axis. One more example is:

transform-origin: 12px 40% 46px;

12px assigns to x-axis, 40% assigns to y-axis, and 46px assigns to z-axis.

CSS transform-origin Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .backBox{width: 120px; height: 120px; background-color: gainsboro; margin: auto;}
      .frontBox{width: 120px; height: 120px; background-color: chocolate;}
      .a{transform: rotate(15deg);}
      .b{transform: rotate(15deg); transform-origin: 100px 0px;}
      .c{transform: rotate(15deg); transform-origin: -100px 0px;}
      .d{transform: rotate(15deg); transform-origin: 0px 100px;}
      .e{transform: rotate(15deg); transform-origin: 0px -100px;}
      .f{transform: rotate(15deg); transform-origin: 0 0;}
      .g{transform: rotate(15deg); transform-origin: 100% 100%;}
      .h{transform: rotate(15deg); transform-origin: 100% 100% 100%;}
      .i{transform: scale(1.4, 0.7); transform-origin: 0 0;}
      .j{transform: scale(1.4, 0.7); transform-origin: 0% bottom;}
      .k{transform: scale(1.4, 0.7); transform-origin: 100% bottom;}
      .l{transform: scale(1.4, 0.7); transform-origin: 0% top;}
      .m{transform: skewX(45deg); transform-origin: 70% 20%;}
      .n{transform: skewX(45deg); transform-origin: 70% 20% 90%;}
      .o{transform: skewY(45deg); transform-origin: 70% 20%;}
      .p{transform: skewY(45deg); transform-origin: 70%;}
   </style>
</head>
<body>
   
   <h2>transform: rotate(15deg)</h2>
   <div class="backBox">
      <div class="frontBox a"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 100px 0px</h2>
   <div class="backBox">
      <div class="frontBox b"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: -100px 0px</h2>
   <div class="backBox">
      <div class="frontBox c"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 0px 100px</h2>
   <div class="backBox">
      <div class="frontBox d"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 0px -100px</h2>
   <div class="backBox">
      <div class="frontBox e"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 0 0</h2>
   <div class="backBox">
      <div class="frontBox f"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 100% 100%</h2>
   <div class="backBox">
      <div class="frontBox g"></div>
   </div>

   <h2>transform: rotate(15deg); transform-origin: 100% 100% 100%</h2>
   <div class="backBox">
      <div class="frontBox h"></div>
   </div>

   <h2>transform: scale(1.4, 0.7); transform-origin: 0 0</h2>
   <div class="backBox">
      <div class="frontBox i"></div>
   </div>

   <h2>transform: scale(1.4, 0.7); transform-origin: 0% bottom</h2>
   <div class="backBox">
      <div class="frontBox j"></div>
   </div>

   <h2>transform: scale(1.4, 0.7); transform-origin: 100% bottom</h2>
   <div class="backBox">
      <div class="frontBox k"></div>
   </div>

   <h2>transform: scale(1.4, 0.7); transform-origin: 0% top</h2>
   <div class="backBox">
      <div class="frontBox l"></div>
   </div>

   <h2>transform: skewX(45deg); transform-origin: 70% 20%</h2>
   <div class="backBox">
      <div class="frontBox m"></div>
   </div>

   <h2>transform: skewX(45deg); transform-origin: 70% 20% 90%</h2>
   <div class="backBox">
      <div class="frontBox n"></div>
   </div>

   <h2>transform: skewY(45deg); transform-origin: 70% 20%</h2>
   <div class="backBox">
      <div class="frontBox o"></div>
   </div>

   <h2>transform: skewY(45deg); transform-origin: 70%</h2>
   <div class="backBox">
      <div class="frontBox p"></div>
   </div>

</body>
</html>

Output

transform: rotate(15deg)

transform: rotate(15deg); transform-origin: 100px 0px

transform: rotate(15deg); transform-origin: -100px 0px

transform: rotate(15deg); transform-origin: 0px 100px

transform: rotate(15deg); transform-origin: 0px -100px

transform: rotate(15deg); transform-origin: 0 0

transform: rotate(15deg); transform-origin: 100% 100%

transform: rotate(15deg); transform-origin: 100% 100% 100%

transform: scale(1.4, 0.7); transform-origin: 0 0

transform: scale(1.4, 0.7); transform-origin: 0% bottom

transform: scale(1.4, 0.7); transform-origin: 100% bottom

transform: scale(1.4, 0.7); transform-origin: 0% top

transform: skewX(45deg); transform-origin: 70% 20%

transform: skewX(45deg); transform-origin: 70% 20% 90%

transform: skewY(45deg); transform-origin: 70% 20%

transform: skewY(45deg); transform-origin: 70%

In above example, the back box, or the box whose background color is gainsboro, is fix. Whereas the transformation is applied to the front box, whose background color is chocolate. I've done this, so that the change in the origin of transformation can easily be spotted.

Note - The rotate() function rotates an element on the plane.

Note - The scale() function resizes an element on x-axis and y-axis both at once.

Note - The skewY() function skews an element vertically.

CSS Online Test

« Previous Tutorial Next Tutorial »