CSS transform-origin
transform-origin is a CSS property used in conjunction with CSS transforms to define the origin point around which an element is transformed or scaled. By default, CSS transforms are applied based on the element’s center, but with transform-origin, you can change this point of origin to achieve specific effects.
The syntax for the transform-origin property is:
transform-origin: x-axis y-axis z-axis;x-axis: The horizontal position of the origin point. It can be specified using a length value (e.g.,px,em) or a percentage (e.g.,50%). The default value is50%.y-axis: The vertical position of the origin point. It follows the same rules as thex-axis. The default value is also50%.z-axis(optional): The depth position of the origin point for 3D transforms. It follows the same rules as thex-axisandy-axis. If not specified, the default value is0.
The transform-origin property is used with CSS transform functions like translate(), scale(), rotate(), skew(), and their 3D counterparts.
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS transform-origin Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: #007bff;
transform: rotate(45deg);
transform-origin: 25% 75%;
}In this example, we have a square .box element with a blue background. We apply a rotate(45deg) transformation to the element. By setting transform-origin: 25% 75%;, we change the transformation origin to 25% from the left and 75% from the top of the element. As a result, the element rotates around this new origin point, rather than the default center.
Using transform-origin, you can create various visual effects by adjusting the origin of the transformations. This property is particularly useful for fine-tuning transformations and achieving more complex animations and layouts. It’s important to experiment with different values and transform functions to understand how transform-origin affects the appearance and behavior of your elements.