The transform-origin property is a crucial CSS property that allows you to change the position of the origin point for an element's transformations. By default, transformations like rotation, scaling, and skewing originate from the center of the element (50% 50%). This property provides the ability to set a different point from which these transformations will be applied, giving you much greater control over the animation's behavior.
Example 1: Top-Left Origin Rotation
/* style.css */
.box {
width: 150px;
height: 150px;
background-color: #3498db;
transition: transform 0.5s ease-in-out;
/* Set the transform origin to the top-left corner (0 0) */
transform-origin: top left;
}
.box:hover {
/* Rotate the element from its new origin */
transform: rotate(45deg);
}
Explanation This code sets the transform-origin to the top-left corner of the .box element. When the user hovers over the box, it rotates 45 degrees around this new origin point, making it appear to swing down and to the right.
Example 2: Bottom-Center Origin for Scaling
/* style.css */
.scalable {
width: 100px;
height: 100px;
background-color: #e74c3c;
/* Set the transform origin to the bottom center */
transform-origin: bottom;
transition: transform 0.4s;
}
.scalable:hover {
/* Scale the element up from the bottom */
transform: scaleY(1.5);
}
Explanation Here, the transform-origin is set to the bottom edge of the element. On hover, the scaleY() transform makes the .scalable element grow vertically, but only upwards from its base.
Example 3: Custom X and Y Origin
/* style.css */
.custom-origin {
width: 120px;
height: 120px;
background-color: #9b59b6;
/* Set a custom origin point: 20px from the left, 20px from the top */
transform-origin: 20px 20px;
transition: transform 0.5s;
}
.custom-origin:hover {
/* Rotate from the custom point */
transform: rotate(90deg);
}
Explanation This example demonstrates using specific pixel values to define the transform origin. The rotation of the .custom-origin element will now pivot around a point 20 pixels from its left and 20 pixels from its top.
Example 4: 3D Transform Origin
/* style.css */
.box-3d {
width: 150px;
height: 150px;
background-color: #f1c40f;
/* Set a 3D transform origin with a Z-offset */
transform-origin: 50% 50% -100px;
transition: transform 1s;
}
.box-3d:hover {
/* Rotate the element in 3D space around the Y-axis */
transform: rotateY(180deg);
}
Explanation The transform-origin property can also accept a third value for the Z-axis in 3D space. Here, the rotation happens around a point that is 100 pixels behind the element's center, creating a wider, more dramatic 3D rotation effect.
Example 5: Right Origin for a Swinging Panel
/* style.css */
.panel {
width: 200px;
height: 300px;
background-color: #1abc9c;
/* Set the origin to the center of the right edge */
transform-origin: right center;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.panel:hover {
/* Create a swinging door effect */
transform: perspective(500px) rotateY(-45deg);
}
Explanation By setting the transform-origin to right center, the .panel element behaves like a door hinged on its right side. The perspective property is added to give the rotation a more realistic 3D depth.
Example 6: Percentage-Based Origin
/* style.css */
.percent-box {
width: 150px;
height: 150px;
background-color: #2ecc71;
/* Set origin to 25% from left and 75% from top */
transform-origin: 25% 75%;
transition: transform 0.5s;
}
.percent-box:hover {
/* Scale the element from the specified origin */
transform: scale(0.5);
}
Explanation This code uses percentage values to define the transform-origin. The .percent-box will shrink towards a point located at 25% of its width and 75% of its height, creating an off-center scaling effect.
Example 7: Using Keywords for all Three Axes
/* style.css */
.keyword-box {
width: 150px;
height: 150px;
background-color: #e67e22;
/* Set the origin using keywords for x, y, and z-offset */
transform-origin: left bottom -50px;
transition: transform 1s;
}
.keyword-box:hover {
/* Perform a 3D rotation */
transform: perspective(600px) rotate3d(1, 1, 0, 90deg);
}
Explanation Here, keywords (left, bottom) are combined with a Z-offset value. The element's transformation now originates from its bottom-left corner but is offset 50 pixels along the Z-axis, influencing the 3D rotation path.