CSS 2D Transforms Transform Origin


Transformations are done with respect to a point which is defined by the transform-origin property.

The property takes 2 values : transform-origin: X Y;

In the following example the first div (.tl) is rotate around the top left corner with transform-origin: 0 0; and the second (.tr)is transformed around it's top right corner with transform-origin: 100% 0. The rotation is applied on hover :


<div class="transform originl"></div>
<div class="transform origin2"></div>


.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;

.origin1 {
    transform-origin: 0 0;

.origin2 {
    transform-origin: 100% 0;

.transform:hover {
    transform: rotate(30deg);

The default value for the transform-origin property is 50% 50% which is the center of the element.