The CSS scale() Function
Give scale() two values, the first for width and the second for height, and the element grows or shrinks accordingly.
Scale up
Here a <div> element ends up twice as wide and three times as tall as it started.
Prompt
Create an HTML page with a div element that uses CSS transform: scale(2, 3) to increase its size to two times the original width and three times the original height. Show the div with some text inside and a background color so the scaling effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scale() - Increase</title>
<style>
div.scaled {
margin: 100px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scale(2, 3);
}
</style>
</head>
<body>
<h1>The scale() Function</h1>
<p>The div element below is scaled to be two times its original width and three times its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Scale down
Here both dimensions of a <div> element are cut to half their starting size.
Prompt
Create an HTML page with a div element that uses CSS transform: scale(0.5, 0.5) to decrease its size to half of its original width and height. Show the div with some text inside and a background color so the scaling effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scale() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<h1>The scale() Function</h1>
<p>The div element below is scaled to be half of its original width and height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
The CSS scaleX() Function
Only the width of an element changes with scaleX(), which can grow or shrink it.
Increase width
A factor of 2 doubles the starting width of this <div> element.
Prompt
Create an HTML page with a div element that uses CSS transform: scaleX(2) to increase its width to two times the original width. Show the div with some text inside and a background color so the effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleX() - Increase</title>
<style>
div.scaled {
margin: 50px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(2);
}
</style>
</head>
<body>
<h1>The scaleX() Function</h1>
<p>The div element below is scaled to be two times its original width:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Decrease width
A factor of 0.5 narrows this <div> element to half the width it started with.
Prompt
Create an HTML page with a div element that uses CSS transform: scaleX(0.5) to decrease its width to half of its original width. Show the div with some text inside and a background color so the effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleX() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 200px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(0.5);
}
</style>
</head>
<body>
<h1>The scaleX() Function</h1>
<p>The div element below is scaled to be half of its original width:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
The CSS scaleY() Function
With scaleY(), the height is the only dimension that changes, either upward or downward.
Increase height
A factor of 3 makes this <div> element three times as tall as it started.
Prompt
Create an HTML page with a div element that uses CSS transform: scaleY(3) to increase its height to three times its original height. Show the div with some text inside and a background color so the effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleY() - Increase</title>
<style>
div.scaled {
margin: 100px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(3);
}
</style>
</head>
<body>
<h1>The scaleY() Function</h1>
<p>The div element below is scaled to be three times its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Decrease height
A factor of 0.5 shortens this <div> element to half the height it started with.
Prompt
Create an HTML page with a div element that uses CSS transform: scaleY(0.5) to decrease its height to half of its original height. Show the div with some text inside and a background color so the effect is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleY() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(0.5);
}
</style>
</head>
<body>
<h1>The scaleY() Function</h1>
<p>The div element below is scaled to be half of its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>