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

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 axes. This direction can be a 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:

  <div id="box">

  </div>

CSS

#box{

  width:100px;

  height:100px;

  background-color:orange;

  margin:25%;

  border-top-left-radius:100px;

  -webkit-transition:all 0.5s;

  -webkit-transform-origin:top;

}

#box:hover{

  -webkit-transform:rotate(90deg); 

}

In this example the quarter circle rotates, keeping the origin at the top edge.

Output

Example 1.1

CSS

#box{

  width:100px;

  height:100px;

  background-color:orange;

  margin:25%;

  border-top-left-radius:100px;

  -webkit-transition:all 2s;

  -webkit-transform-origin:200px;

}

#box:hover{

  -webkit-transform:rotate(720deg); 

}

With the preceding CSS the quarter circle will rotate by fixing the origin at a distance of 200px away from left edge of the box.

Output:

 

Transform origin with two value syntax

In this variant the origin can be transferred to both axes with different amount.

Syntax

transform-origin: x-offset y-offset
transform-origin: y-offset x-offset-keyword
transform-origin: x-offset-keyword y-offset
transform-origin: x-offset-keyword y-offset-keyword
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.

#box{

  position:absolute;

  width:100px;

  height:100px;

  background-color:orange;

  margin:25%;

  border-top-left-radius:100px;

  -webkit-transition:all 2s;

  -webkit-transform-origin:100px 100px; <!-- X,Y -->

}

#box:hover{

  -webkit-transform:rotate(360deg); 

}

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

transform-origin: x-offset y-offset z-offset
transform-origin: y-offset x-offset-keyword z-offset
transform-origin: x-offset-keyword y-offset z-offset
transform-origin: x-offset-keyword y-offset-keyword z-offset
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

body{

  -webkit-perspective:1000px;

  -webkit-perspective-origin:10px -400px;

  -webkit-transform:rotateY(45deg);

}

 

#box{

  position:absolute;

  width:100px;

  height:100px;

  background-color:orange;

  margin:25%;

  border-top-left-radius:100px;

  -webkit-transition:all 2s;

  -webkit-transform-origin:100px 100px 10px;

  -webkit-transform-style:preserve-3d;

  z-index:1;

}

#box:hover{

  -webkit-transform:rotateY(720deg); 

}

 

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

Up Next
    Ebook Download
    View all
    Learn
    View all