2D-преобразования CSS
2D-преобразования CSS
Преобразования CSS позволяют перемещать, вращать, масштабировать и наклонять элементы.
Наведите указатель мыши на элемент ниже, чтобы увидеть 2D-преобразование:
В этой главе вы узнаете о следующем свойстве CSS:
transform
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Методы 2D-преобразования CSS
С помощью свойства CSS transformвы можете использовать следующие методы 2D-преобразования:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Совет: Вы узнаете о трехмерных преобразованиях в следующей главе.
Метод перевода()
Метод translate()перемещает элемент из его текущей позиции (в соответствии с параметрами, заданными для оси X и оси Y).
В следующем примере элемент <div> перемещается на 50 пикселей вправо и на 100 пикселей вниз от его текущей позиции:
Пример
div
{
transform: translate(50px, 100px);
}
Метод поворота()
Метод rotate()поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданным градусом.
В следующем примере элемент <div> поворачивается по часовой стрелке на 20 градусов:
Пример
div
{
transform: rotate(20deg);
}
Использование отрицательных значений приведет к вращению элемента против часовой стрелки.
В следующем примере элемент <div> поворачивается против часовой стрелки на 20 градусов:
Пример
div
{
transform: rotate(-20deg);
}
Метод шкалы ()
Метод scale()увеличивает или уменьшает размер элемента (в соответствии с заданными параметрами ширины и высоты).
В следующем примере элемент <div> увеличивается в два раза по сравнению с исходной шириной и в три раза по сравнению с исходной высотой:
Пример
div
{
transform: scale(2, 3);
}
В следующем примере элемент <div> уменьшается до половины исходной ширины и высоты:
Пример
div
{
transform: scale(0.5, 0.5);
}
Метод scaleX()
Метод scaleX()увеличивает или уменьшает ширину элемента.
В следующем примере элемент <div> увеличивается в два раза по сравнению с исходной шириной:
Пример
div
{
transform: scaleX(2);
}
В следующем примере элемент <div> уменьшается до половины его исходной ширины:
Пример
div
{
transform: scaleX(0.5);
}
Метод scaleY()
Метод scaleY()увеличивает или уменьшает высоту элемента.
В следующем примере высота элемента <div> увеличивается в три раза по сравнению с исходной высотой:
Пример
div
{
transform: scaleY(3);
}
В следующем примере высота элемента <div> уменьшается до половины его исходной высоты:
Пример
div
{
transform: scaleY(0.5);
}
Метод skewX()
Метод skewX()наклоняет элемент вдоль оси X на заданный угол.
В следующем примере элемент <div> наклоняется на 20 градусов по оси X:
Пример
div
{
transform: skewX(20deg);
}
Метод skewY()
Метод skewY()наклоняет элемент по оси Y на заданный угол.
В следующем примере элемент <div> наклоняется на 20 градусов по оси Y:
Пример
div
{
transform: skewY(20deg);
}
Метод перекоса()
Метод skew()наклоняет элемент по осям X и Y на заданные углы.
В следующем примере элемент <div> наклоняется на 20 градусов по оси X и на 10 градусов по оси Y:
Пример
div
{
transform: skew(20deg, 10deg);
}
Если второй параметр не указан, он имеет нулевое значение. Итак, в следующем примере элемент <div> смещается на 20 градусов по оси X:
Пример
div
{
transform: skew(20deg);
}
Метод матрицы()
Метод matrix()объединяет все методы 2D-преобразования в один.
Метод matrix() принимает шесть параметров, содержащих математические функции, которые позволяют вращать, масштабировать, перемещать (перемещать) и наклонять элементы.
Параметры следующие: матрица(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Пример
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Свойства преобразования CSS
В следующей таблице перечислены все свойства 2D-преобразования:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
Методы 2D-преобразования CSS
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |