Функция CSS scale()
Передайте scale() два значения, первое для ширины и второе для высоты, и элемент соответственно увеличится или уменьшится.
Увеличение
Здесь элемент <div> становится в два раза шире и в три раза выше, чем был изначально.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scale(2, 3) для увеличения его размера в два раза по ширине и в три раза по высоте от исходных размеров. Покажите div с текстом внутри и цветом фона, чтобы эффект масштабирования был виден.
Результат: полная HTML-страница
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>
Уменьшение
Здесь оба размера элемента <div> уменьшаются до половины исходных.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scale(0.5, 0.5) для уменьшения его размера до половины исходной ширины и высоты. Покажите div с текстом внутри и цветом фона, чтобы эффект масштабирования был виден.
Результат: полная HTML-страница
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>
Функция CSS scaleX()
С помощью scaleX() меняется только ширина элемента: её можно увеличить или уменьшить.
Увеличение ширины
Коэффициент 2 удваивает исходную ширину этого элемента <div>.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scaleX(2) для увеличения его ширины в два раза от исходной ширины. Покажите div с текстом внутри и цветом фона, чтобы эффект был виден.
Результат: полная HTML-страница
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>
Уменьшение ширины
Коэффициент 0.5 сужает этот элемент <div> до половины исходной ширины.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scaleX(0.5) для уменьшения его ширины до половины исходной ширины. Покажите div с текстом внутри и цветом фона, чтобы эффект был виден.
Результат: полная HTML-страница
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>
Функция CSS scaleY()
С помощью scaleY() меняется только высота, в большую или в меньшую сторону.
Увеличение высоты
Коэффициент 3 делает этот элемент <div> в три раза выше, чем он был изначально.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scaleY(3) для увеличения его высоты в три раза от исходной высоты. Покажите div с текстом внутри и цветом фона, чтобы эффект был виден.
Результат: полная HTML-страница
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>
Уменьшение высоты
Коэффициент 0.5 укорачивает этот элемент <div> до половины исходной высоты.
Prompt
Создайте HTML-страницу с элементом div, который использует CSS transform: scaleY(0.5) для уменьшения его высоты до половины исходной высоты. Покажите div с текстом внутри и цветом фона, чтобы эффект был виден.
Результат: полная HTML-страница
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>