CSS 2D-преобразования

Преобразования CSS позволяют перемещать, вращать, масштабировать и наклонять элементы.

Наведите курсор на элемент ниже, чтобы увидеть 2D-преобразование:

2D rotate

В этой главе вы узнаете о следующем свойстве CSS:

transform

Поддержка браузера

Цифры в таблице указывают первую версию браузера, полностью поддерживающую это свойство.

Property
transform	36.0	10.0	16.0	9.0	23.0

Методы CSS 2D-преобразований

С помощью свойства CSS transform вы можете использовать следующие методы 2D-преобразования:

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

Совет. Вы узнаете о 3D-преобразованиях в следующей главе.

Метод `translate()`

Метод translate() перемещает элемент из его текущей позиции (согласно с параметрами, заданными для оси X и оси Y).

В следующем примере элемент <div> перемещается на 50 пикселей вправо. и на 100 пикселей вниз от текущего положения:

Пример

div
{
   
transform: translate(50px, 100px);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

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

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

Метод `rotate()`

Метод rotate() поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданным углом.

В следующем примере элемент <div> поворачивается по часовой стрелке на 20 градусов:

Пример

div
{
  transform: rotate(20deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

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

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

Использование отрицательных значений приведет к повороту элемента против часовой стрелки.

В следующем примере элемент <div> поворачивается против часовой стрелки на 20 градусов:

Пример

div
{
   
transform: rotate(-20deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

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

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

Метод `scale()`

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

В следующем примере элемент <div> увеличивается в два раза по сравнению с его исходной шириной и в три раза по сравнению с его исходной высотой:

Пример

div
{
   
transform: scale(2, 3);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

В следующем примере элемент <div> уменьшается до половины его исходной ширины и высоты:

Пример

div
{
   
transform: scale(0.5, 0.5);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

Метод `scaleX()`

Метод scaleX() увеличивает или уменьшает ширина элемента.

В следующем примере ширина элемента <div> увеличивается в два раза по сравнению с его исходной шириной:

Пример

div
{
   
transform: scaleX(2);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

В следующем примере ширина элемента <div> уменьшается до половины его исходной ширины:

Пример

div
{
   
transform: scaleX(0.5);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

Метод `scaleY()`

Метод scaleY() увеличивает или уменьшает высота элемента.

В следующем примере элемент <div> увеличивается в три раза по сравнению с исходным. высота:

Пример

div
{
   
transform: scaleY(3);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

В следующем примере элемент <div> уменьшается до половины его исходного значения. высота:

Пример

div
{
   
transform: scaleY(0.5);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

Метод `skewX()`

Метод skewX() наклоняет элемент по оси X на заданный угол.

В следующем примере элемент <div> наклоняется на 20 градусов по горизонтали. Ось X:

Пример

div
{
   
transform: skewX(20deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

Метод `skewY()`

Метод skewY() наклоняет элемент по оси Y на заданный угол.

В следующем примере элемент <div> наклоняется на 20 градусов по оси Y:

Пример

div
{
   
transform: skewY(20deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

Метод `skew()`

Метод skew() наклоняет элемент по осям X и Y на заданные углы.

В следующем примере элемент <div> наклоняется на 20 градусов по оси X и на 10 градусов по оси Y:

Пример

div
{
   
transform: skew(20deg, 10deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Если второй параметр не указан, он имеет нулевое значение. Итак, в следующем примере элемент <div> наклоняется на 20 градусов по оси X:

Пример

div
{
   
transform: skew(20deg);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

Метод `matrix()`

Метод matrix() объединяет все методы двумерного преобразования в один.

Метод матрицы() принимает шесть параметров, содержащих математические функции: который позволяет вращать, масштабировать, перемещать (перемещать) и наклонять элементы.

Параметры следующие: матрица(scaleX(), skewY(), skewX(), ScaleY(), TranslateX(), TranslateY())

Пример

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

Свойства преобразования CSS

В следующей таблице перечислены все свойства 2D-преобразования:

transform: Применяет 2D- или 3D-преобразование к элементу.
transform-origin: Позволяет менять положение трансформируемых элементов.

Методы CSS 2D-преобразования

matrix(n,n,n,n,n,n): Определяет 2D-преобразование, используя матрицу из шести значений.
translate(x,y): Определяет двумерное перемещение, перемещая элемент по осям X и Y.
translateX(n): Определяет 2D-перенос, перемещая элемент вдоль оси X.
translateY(n): Определяет 2D-перенос, перемещая элемент вдоль оси Y.
scale(x,y): Определяет преобразование 2D-масштаба, изменяя ширину и высоту элементов.
scaleX(n): Определяет преобразование 2D-масштаба, изменяя ширину элемента.
scaleY(n): Определяет преобразование 2D-масштаба, изменяя высоту элемента.
rotate(angle): Определяет 2D вращение, угол указывается в параметре
skew(x-angle,y-angle): Определяет двумерное преобразование наклона вдоль осей X и Y.
skewX(angle): Определяет 2D-преобразование наклона вдоль оси X.
skewY(angle): Определяет 2D-преобразование наклона вдоль оси Y.

CSS 2D-преобразования

Оглавление