CSS 2D Transforms Transform Origin
Example
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 :
HTML:
<div class="transform originl"></div>
<div class="transform origin2"></div>
CSS:
.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.
