Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Scaling Elements | Transforming Elements with CSS
Advanced CSS Techniques

book
Scaling Elements

scale() allows us to increase or decrease the element size. Also, we can resize an element only vertically using the scaleY() property or only horizontally using the scaleX() property.

css
transform: scale(X-value, Y-value);
transform: scaleX(value);
transform: scaleY(value);

The values for the scale functions must be unitless. By default, the value is 1, which means make no changes.

  • scale() function can get two values. The first (X-value) is the number representing the horizontal resize. The second (Y-value) is the number representing the vertical resize. If we set one value, the browser applies the same for horizontal and vertical scales;

  • scaleX and scaleY functions get one value and change an element horizontally and vertically, respectively.

Let's have some practice and add scaling for the following elements:

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="box">scale(1.5, 1.5)</div>
<div class="box">scaleX(0.2)</div>
<div class="box">scaleY(1.5)</div>
</div>
</body>
</html>
question mark

Which of the following options can be used to scale an element only in the horizontal direction?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

We use cookies to make your experience better!
some-alt