Transform-Origin

CSS3 allows for some exciting transform possibilities. One of the properties you can use along with CSS transforms is transform-origin. This property establishes the starting point of the transformation of an element. This helps position transformed elements more effectively in a website's design.

For 2-dimensional animations, you can change the X-axis (horiztontal) and the Y-axis (vertical) of an element.

If you are working with 3D transforms, you can also change the Z-axis of that element, which would simulate depth.

One note on the CSS3 transform-origin property is that, on its own, it does nothing. You need to pair it with the transform property to make it work.

 

transform-origin Syntax:

The syntax of the CSS transform-origin property is as follows:

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

You can then define the X-axis and the Y- axis with lengths, percentages or the following keyword values:

  • right
  • left
  • top
  • bottom
  • center

The Z-axis, which is only used in 3D transformations, can be adjusted with a length value.

 

transform-origin Initial Value

transform-origin: 50% 50% 0

transform-origin Applies to

The transform-orgin property applies to both block-level and inline elements.

transform-origin Inheritance

The transform orgin property is not inherited

transform-origin Browser Support:

The transform-origin is supported by modern browsers if their vendor specific prefix is used.

The browser that are supported are:

  • Android 2.1+ (using -webkit- prefix)
  • Chrome 4+ (using -webkit- prefix)
  • Firefox 3.5+ (using -moz- prefix)
  • Internet Explorer 9+ (using -ms- prefix)
  • iOS 3.2+ (using -webkit- prefix)
  • Opera 10.5+ (using -o- prefix)
  • Opera Mobile 11.0+ (using -o- prefix)
  • Safari 3.1+ (using -webkit- prefix)

     

    transform-origin Examples

    Here is an example of the CSS that you would write to rotate a divison(which we have given a class of "box") 45degrees and move its base placement right 30% and down 100%. Remember, for transform-origin to work, the CSS transform property must also be used. That is why you see both in the example below:

    div.box {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -moz-transform-origin: 30% 100%;
    -webkit-transform-origin: 30% 100%;
    -o-transform-origin: 30% 100%;
    -ms-transform-origin: 30% 100%;
    transform-origin: 30% 100%;
    }

     

    transform-origin Special Notes

    You will still need to adjust how the transformed element compares to the rest of the contents on the page. In many cases, moving the origin just moves the element, but it does not affect how the browser lays out the rest of the page. Most browsers do the layout based on where the element would have been without any transformation.

    More Information on CSS Transformations

    • CSS Transformations
    • Style Property

    More help with CSS 3
     

    Edited by Jeremy Girard