Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animate transform-origin property with CSS Animation
The CSS transform-origin property defines the point around which a transformation is applied. When animated, you can create dynamic effects where the rotation or scaling point changes during the animation.
Syntax
selector {
transform-origin: x-axis y-axis z-axis;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
percentage {
transform-origin: new-x new-y new-z;
}
}
Possible Values
| Value | Description |
|---|---|
length |
Specific distance from the left/top edge (px, em, rem) |
percentage |
Percentage of the element's width/height |
keywords |
left, center, right (x-axis) / top, center, bottom (y-axis) |
Example: Animating Transform Origin
The following example demonstrates how to animate the transform-origin property, making a rotated element change its rotation point during the animation −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
width: 400px;
border: 2px solid black;
margin: 50px auto;
padding: 20px;
background-color: #f0f0f0;
}
.animated-box {
position: absolute;
top: 50px;
left: 50px;
width: 80px;
height: 80px;
background-color: #ff6b35;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
transform: rotate(45deg);
transform-origin: 30% 10%;
animation: changeOrigin 4s infinite ease-in-out;
}
@keyframes changeOrigin {
0% {
transform-origin: 30% 10%;
background-color: #ff6b35;
}
50% {
transform-origin: 70% 90%;
background-color: #4ecdc4;
}
100% {
transform-origin: 30% 10%;
background-color: #ff6b35;
}
}
</style>
</head>
<body>
<h2 style="text-align: center;">Animated Transform Origin Example</h2>
<div class="container">
<div class="animated-box">Box</div>
</div>
</body>
</html>
An orange rotated box changes its rotation point from top-left (30% 10%) to bottom-right (70% 90%) and back, creating a swinging motion effect. The box also changes color during the animation.
Key Points
- The
transform-originproperty works with any CSS transform (rotate, scale, skew) - Default value is
50% 50%(center of the element) - Animating this property creates smooth transitions between different transformation points
- Combine with other animations for complex visual effects
Conclusion
Animating the transform-origin property allows you to create dynamic transformations where the pivot point changes over time. This technique is useful for creating engaging visual effects like swinging, orbiting, or morphing animations.
Updated on: 2026-03-15T13:34:31+05:30
1K+ Views
Advertisements