CSS Scale Center Point
CSS Scale Center Point
In CSS, we often use transform Attributes can be used to scale an element. The scale() function allows you to scale an element to a specified ratio. However, by default, the element scales around its top-left corner, which may not be desirable in some cases. This article will explain how to achieve scaling based on a specific center using CSS .
1. Using the transform-origin Attribute
The transform-origin attribute specifies the origin of an element’s transformation—the center point for scaling, rotation, and other operations. The default value is 50% 50%, which is the center point of the element. We can change the center point of the zoom by setting different values.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: 50% 50%;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the red square, the square scales around the center point. This is because we set transform-origin: 50% 50%; in the .box style, which uses the center point as the scaling point.
2. Specifying a Different Center Point
In addition to using percentage values, we can also use specific length values to specify the scaling center point. For example, we can set the center point to the lower-right corner of the square.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: 100px 100px;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we set the transform-origin of the .box to 100px 100px, which means the lower-right corner is the scaling center point. When you hover over the red square, the square scales with the lower-right corner as the center point.
3. Using Keyword Values
In addition to specific lengths and percentages, the transform-origin property also supports keyword values such as top, bottom, left, and right. These keyword values help us more conveniently specify the scaling center point.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: top right;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the above example, we set the transform-origin of the .box to top right, meaning the top right corner is the center of scaling. When the mouse hovers over the red square, the square will scale with its top right corner as the center.
4. Using Multiple Values
The transform-origin property also supports multiple values to specify the center point of the scale. This can help us more precisely control the scale effect in some cases.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: 80% 20%;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, we set the transform-origin of .box to 80% 20%, which means the horizontal coordinate is 80% of the top right corner and the vertical coordinate is 20% of the top edge. When you hover over the red square, the square will scale around the specified center point.
5. Combine with Other Transformations
In addition to scaling, we can also combine other transformations to create richer animation effects. For example, we can rotate and scale an element simultaneously.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: 50% 50%;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, when the mouse hovers over the red square, the square will rotate and scale simultaneously.
6. Control the Center Point with JavaScript
In addition to setting the transform-origin attribute directly in CSS, we can also use JavaScript to dynamically control the zoom center point. This allows for more flexible effects in more interactive scenarios.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: 50% 50%;
transition: transform 0.5s;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('mouseover', function() {
box.style.transformOrigin = 'top right';
box.style.transform = 'scale(2)';
});
box.addEventListener('mouseout', function() {
box.style.transformOrigin = '50% 50%';
box.style.transform = 'scale(1)';
});
</script>
</body>
</html>
Output:
In the example above, when the mouse hovers over the red square, the square zooms around its top-right corner. When the mouse moves out, the square zooms back to its original center point.
7. Using CSS Animations
In addition to using JavaScript to control the center point, we can also use CSS animations to achieve more complex zoom effects. By setting different transform-origin values in different keyframes, we can achieve richer animation effects.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: scaleAnimation 2s infinite alternate;
}
@keyframes scaleAnimation {
0% {
transform: scale(1);
transform-origin: 50% 50%;
}
50% {
transform: scale(2); transform-origin: top right;
}
100% {
transform: scale(1);
transform-origin: bottom left;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In the example above, the red square will loop over 2 seconds, scaling from its original size to the top right corner, then back to the bottom left corner, and so on.
8. Using CSS Variables
CSS variables are a new feature in CSS that help us more conveniently manage values in style sheets. We can combine CSS variables with the calc() function to achieve more flexible control over the zoom center point.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scale center point</title>
<style>
:root {
--center-x: 50%;
--center-y: 50%;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: var(--center-x) var(--center-y);
transition: transform 0.5s;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('mouseover', function() {
document.documentElement.style.setProperty('--center-x', '80%');
document.documentElement.style.setProperty('--center-y', '20%');
});
box.addEventListener('mouseout', function() {
document.documentElement.style.setProperty('--center-x', '50%');
document.documentElement.style.setProperty('--center-y', '50%'); });
</script>
</body>
</html>
Output:
In the example above, we use the CSS variables --center-x and --center-y to control the center point of the scale. When the mouse hovers over the red square, the center point changes from the default value to the top right corner and returns to the default value when the mouse moves out.
Through the above example, we can see how to control the scale center point in CSS. Different effects can be achieved by setting the transform-origin property directly, combining it with other transformation effects, controlling it with JavaScript, or using CSS animations.