CSS transform-origin property
The transform-origin property in CSS defines the point around which a transformation is applied. By default, transformations (like rotation, scaling, or skewing) are performed around the center of an element, but transform-origin allows you to change this point to any other location within or even outside the element.
Syntax
selector {
transform-origin: x-axis y-axis z-axis;
}
- x-axis: Specifies the horizontal position of the origin. Can be a length (e.g.,
50px), a percentage (e.g.,50%), or keywords likeleft,center, orright. - y-axis: Specifies the vertical position of the origin. Can be a length (e.g.,
50px), a percentage (e.g.,50%), or keywords liketop,center, orbottom. - z-axis: (Optional) Specifies the depth for 3D transformations. It's a length value (e.g.,
50px).
Default Value
- The default value is
transform-origin: 50% 50%;, which means the transformation is applied from the center of the element.
Example Values
- Top left corner:
transform-origin: 0% 0%;transform-origin: left top; - Bottom right corner:
transform-origin: 100% 100%;transform-origin: right bottom; - Center (default):
transform-origin: 50% 50%;transform-origin: center center; - Specific point (e.g., 20px from the left and 50px from the top):
transform-origin: 20px 50px;
Practical Example
1. Rotating from Different Origins
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Origin Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
transition: transform 0.5s ease;
}
.box-rotate-center {
transform-origin: center center;
}
.box-rotate-top-left {
transform-origin: top left;
}
.box-rotate-bottom-right {
transform-origin: bottom right;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box box-rotate-center">Center</div>
<div class="box box-rotate-top-left">Top Left</div>
<div class="box box-rotate-bottom-right">Bottom Right</div>
</body>
</html>
2. Explanation
- Box 1 (Center): This box rotates around its center, which is the default behavior.
- Box 2 (Top Left): This box rotates around its top-left corner. When you hover over it, you'll notice that the entire box swings around this corner.
- Box 3 (Bottom Right): This box rotates around its bottom-right corner. When hovered, it pivots around this point.
Visual Representation
If you imagine the transform-origin as a pivot point, changing its position will alter how the element moves or changes during the transformation. For example:
- Rotating around the center: The element spins like a wheel.
- Rotating around a corner: The element swings like a door around a hinge.
Using transform-origin with Other Transforms
The transform-origin is not limited to rotation. It affects any transformation, including scaling and skewing. For example, if you scale an element and set the transform-origin to the top-left corner, the element will grow outward from that corner instead of from the center.
Example with Scaling
.box-scale {
transform-origin: bottom right;
}
.box-scale:hover {
transform: scale(1.5);
}
In this case, when you hover over the box, it will grow outward from the bottom-right corner.