2D-трансформации в CSS

CSS 2D-трансформации

Перемещение, поворот, масштабирование и наклон элемента выполняются через одно свойство CSS — transform, которое работает с трансформациями как в 2D, так и в 3D.

Функции CSS 2D-трансформаций

Для работы в двух измерениях transform принимает следующие функции:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Функция CSS translate()

Передайте translate() одно значение для оси X и одно для оси Y, и элемент сместится на эти расстояния от того места, где находится сейчас.

Пример

Элемент <div> здесь оказывается на 100 пикселей ниже и на 50 пикселей правее своей начальной точки.

Создайте HTML-страницу с элементом div, который использует CSS `transform: translate(50px, 100px)` для перемещения на 50 пикселей вправо и 100 пикселей вниз от исходного положения. Покажите рамку или цвет фона, чтобы перемещение было видно.

> Результат: полная HTML-страница

Prompt

Создайте HTML-страницу с элементом div, который использует CSS transform: translate(50px, 100px) для перемещения на 50 пикселей вправо и 100 пикселей вниз от исходного положения. Покажите рамку или цвет фона, чтобы перемещение было видно.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS translate()</title>
<style>
div.moved {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px, 100px);
}
</style>
</head>
<body>

<h1>The translate() Function</h1>

<p>The translate() function moves an element from its current position:</p>

<div class="moved">
This div is moved 50px to the right and 100px down.
</div>

</body>
</html>

Функция CSS rotate()

Чтобы повернуть элемент, передайте rotate() количество градусов. Направление может быть как по часовой стрелке, так и против часовой стрелки.

Поворот по часовой стрелке

К элементу <div> ниже применяется поворот на 20 градусов по часовой стрелке.

Создайте HTML-страницу с элементом div, который использует CSS `transform: rotate(20deg)` для поворота на 20 градусов по часовой стрелке. Задайте div-у цвет фона и немного padding, чтобы поворот был виден.

> Результат: полная HTML-страница

Prompt

Создайте HTML-страницу с элементом div, который использует CSS transform: rotate(20deg) для поворота на 20 градусов по часовой стрелке. Задайте div-у цвет фона и немного padding, чтобы поворот был виден.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Clockwise</title>
<style>
div.rotated {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin: 50px;
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Function</h1>

<p>The rotate() function rotates an element clockwise:</p>

<div class="rotated">
This div is rotated clockwise 20 degrees.
</div>

</body>
</html>

Поворот против часовой стрелки

Чтобы повернуть в другую сторону, достаточно отрицательного значения. Ниже тот же <div> поворачивается на 20 градусов против часовой стрелки.

Создайте HTML-страницу с элементом div, который использует CSS `transform: rotate(-20deg)` для поворота на 20 градусов против часовой стрелки. Задайте div-у цвет фона и немного padding, чтобы поворот был виден.

> Результат: полная HTML-страница

Prompt

Создайте HTML-страницу с элементом div, который использует CSS transform: rotate(-20deg) для поворота на 20 градусов против часовой стрелки. Задайте div-у цвет фона и немного padding, чтобы поворот был виден.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Counter-clockwise</title>
<style>
div.rotated {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin: 50px;
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Function</h1>

<p>Using negative values rotates the element counter-clockwise:</p>

<div class="rotated">
This div is rotated counter-clockwise 20 degrees.
</div>

</body>
</html>

Свойства CSS Transform

Все свойства, доступные для 2D-трансформаций, приведены в этой таблице.

Таблица свойств Transform

<table>
  <tr><th>Property</th><th>Description</th></tr>
  <tr><td>transform</td><td>Applies a 2D or 3D transformation to an element</td></tr>
  <tr><td>transform-origin</td><td>Allows you to change the position on transformed elements</td></tr>
</table>