Post
Ask Question

All About Transform Origin CSS3 Property

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:
  • X-offset
    It is an integer number given in pixels or in percentages, it describes the distance of the transformation origin from the left edge of the box.
  • offset-keyword
    It is one of the keywords from the left, right, top, bottom or center describing the corresponding offset of the box. 
  • Y-offset
    It is an integer number given in pixels or in a percentage, it describes the distance of the transformation origin from the top edge of the box. 
  • X-offset-keyword
    It is chosen from one of the left, right or center keywords that describe the distance of the transform-origin from the chosen box edge.
  • Y-offset-keyword
    It is chosen from one of the top, bottom or center keywords that describe the distance of the transform-origin from the chosen box edge.
  • Z- offset
    It is a length given in pixels that describes how far from the user eye transformation origin is to be set. This value can't be set in a percentage as in X/Y offset.
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. }  
  6.    
  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:
  • For mozilla use "-moz-"
  • For IE use "-ms-"
  • For Opera use "-o-"
Live Demo List


Similar Articles