2.1 The transform-origin Property
The transform-origin property in CSS defines the point around which transformations are applied, such as
rotate, scale, skew, and translate. By default, this point is at
the center of the element, but you can change its position to achieve the desired visual effects.
Basics of transform-origin
Syntax of the transform-origin property:
element {
transform-origin: x-axis y-axis z-axis;
}
Where:
x-axis: defines the position of the point along the horizontal axisy-axis: defines the position of the point along the vertical axisz-axis: defines the position of the point along the Z axis (used for 3D transformations)
Possible values:
- Keywords:
top,right,bottom,left,center - Percentage values: set the origin point as a percentage of the element's size
- Absolute values: set the origin point in pixels or other units of measure
Examples of values:
transform-origin: 50% 50%;— center of the element (default value)transform-origin: 0 0;— top left corner of the elementtransform-origin: 100% 100%;— bottom right corner of the elementtransform-origin: 50px 100px;— offset by 50 pixels to the right and 100 pixels down from the top left corner
Centering the origin point (default)
In this example, the rotate transformation will occur around the center of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering the Origin Point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Offset Point
Offsetting the origin point to the top left corner
In this example, the origin point of the transformation is offset to the top left corner of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin Point at Top Left Corner</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Offsetting the origin point to the bottom right corner
In this example, the origin point of the transformation is offset to the bottom right corner of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin Point at Bottom Right Corner</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Setting Values
Using percentage values
In this example, the origin point of the transformation is at 25% horizontally and 75% vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin Point with Percentage Values</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Using absolute values
In this example, the origin point of the transformation is offset by 50 pixels horizontally and 20 pixels vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin Point with Absolute Values</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Practical Use
Rotating an element around a specific point
Using transform-origin is useful for creating rotating elements that need to rotate around a specific point. For example, making a clock hand.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Clock Hand</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Example for 1 o'clock position */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Creating a scalable element
Changing the origin point is also useful for scaling elements relative to different points, which can be useful for creating dynamic interfaces.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalable Element</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION