Introduction

In this article, we will learn about the CSS3 transform-origin property and will create a demo to understand how this property works. This property is a part of CSS3 and is not fully supported by all browsers so we need to use a browser-specific prefix with this property. This property comes in the following 3 variants:
  1. Transform origin with one value syntax\
  2. Transform origin with two value syntax\
  3. Transform origin with three value syntax

The value type of Transform Origin

This property accepts the following types of values:
In the preceding description the "left" keyword is equal to "0%", "center" is equal to "50%", "right" is equal to "100%" , "top" is equal to "0%" and "bottom" is the same as "100%".

Transform origin with one value syntax

In this variant, the origin is transformed in only one axis. This direction can be an X-axes or Y-axes but not both.
Syntax
transform-origin: x-offset
Ex. transform-origin: 100px;
transform-origin: offset-keyword
Ex. transform-origin: right;
Example 1
The HTML for this example is as follows:
  1. <div id="box">
  2. </div>
CSS
  1. #box{
  2. width:100px;
  3. height:100px;
  4. background-color:orange;
  5. margin:25%;
  6. border-top-left-radius:100px;
  7. -webkit-transition:all 0.5s;
  8. -webkit-transform-origin:top;
  9. }
  10. #box:hover{
  11. -webkit-transform:rotate(90deg);
  12. }
In this example the quarter circle rotates, keeping the origin at the top edge.
Output
Example 1.1
CSS
  1. #box{
  2. width:100px;
  3. height:100px;
  4. background-color:orange;
  5. margin:25%;
  6. border-top-left-radius:100px;
  7. -webkit-transition:all 2s;
  8. -webkit-transform-origin:200px;
  9. }
  10. #box:hover{
  11. -webkit-transform:rotate(720deg);
  12. }
With the preceding CSS, the quarter circle will rotate by fixing the origin at a distance of 200px away from the left edge of the box.
Output

Transform origin with two value syntax

In this variant, the origin can be transferred to both axes with a different amount.
Syntax
  1. transform-origin: x-offset y-offset
  2. transform-origin: y-offset x-offset-keyword
  3. transform-origin: x-offset-keyword y-offset
  4. transform-origin: x-offset-keyword y-offset-keyword
  5. transform-origin: y-offset-keyword x-offset-keyword
Example 2
The HTML is the same as in Example 1, but the CSS has a few changes.
  1. #box{
  2. position:absolute;
  3. width:100px;
  4. height:100px;
  5. background-color:orange;
  6. margin:25%;
  7. border-top-left-radius:100px;
  8. -webkit-transition:all 2s;
  9. -webkit-transform-origin:100px 100px; <!-- X,Y -->
  10. }
  11. #box:hover{
  12. -webkit-transform:rotate(360deg);
  13. }
Output

Transform origin with three value syntax

With this syntax, we can translate the origin in all three axes with a different amount. It helps in making many 3D designs.
Syntax
  1. transform-origin: x-offset y-offset z-offset
  2. transform-origin: y-offset x-offset-keyword z-offset
  3. transform-origin: x-offset-keyword y-offset z-offset
  4. transform-origin: x-offset-keyword y-offset-keyword z-offset
  5. transform-origin: y-offset-keyword x-offset-keyword z-offset
Example 3
The HTML will remain the same as in Example 1 but the CSS has changed to accommodate a 3D view.
CSS
  1. body{
  2. -webkit-perspective:1000px;
  3. -webkit-perspective-origin:10px -400px;
  4. -webkit-transform:rotateY(45deg);
  5. }
  7. #box{
  8. position:absolute;
  9. width:100px;
  10. height:100px;
  11. background-color:orange;
  12. margin:25%;
  13. border-top-left-radius:100px;
  14. -webkit-transition:all 2s;
  15. -webkit-transform-origin:100px 100px 10px;
  16. -webkit-transform-style:preserve-3d;
  17. z-index:1;
  18. }
  19. #box:hover{
  20. -webkit-transform:rotateY(720deg);
  21. }
In the preceding example we have translated the origin at X=100px,Y=100px, Z=10px. To make the effect visible in 3D space we have added the perspective and "transform-style" property.
Output

Summary

That's all for this article. I hope you have enjoyed reading this article. This is one of the confusing properties of CSS3 but from now on you don't need to worry about it. In case of any doubts feel free to ask in the comments section.
Note: In case you are not running the Chrome browser you need to use your browser-specific prefix instead of -webkit-. Some of the prefixes are as follows:
Live Demo List