CSS :: Свойство transform
css-свойство transform (от англ. transform – трансформировать, преобразовывать) используется для трансформации элементов, позволяя сдвигать, поворачивать, масштабировать, а также наклонять (деформация сдвига) элементы. При этом доступны два вида css-трансформаций: 2D-трансформации на плоскости и 3D-трансформации в пространстве.
Характеристики
- Значение по умолчанию: none.
- Применяется: к трансформируемым элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.transform="value".
Синтаксис
transform: <функция> [<функция>]* | none
Значения
В качестве значений принимает ряд специальных функций, позволяющих трансформировать элементы должным образом:
- translate() – сдвигает элемент на плоскости вдоль осей X и Y;
- translateX() – сдвигает элемент вдоль оси X;
- translateY() – сдвигает элемент вдоль оси Y;
- translateZ() – сдвигает элемент вдоль оси Z;
- translate3d() – сдвигает элемент в трехмерном пространстве;
- scale() – масштабирует элемент на плоскости;
- scaleX() – масштабирует элемент вдоль оси X;
- scaleY() – масштабирует элемент вдоль оси Y;
- scaleZ() – масштабирует элемент вдоль оси Z;
- scale3d() – масштабирует элемент в трехмерном пространстве;
- rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin;
- rotateX() – поворачивает элемент на требуемый угол относительно оси X;
- rotateY() – поворачивает элемент на требуемый угол относительно оси Y;
- rotateZ() – поворачивает элемент на требуемый угол относительно оси Z;
- rotate3d() – поворачивает элемент в трехмерном пространстве;
- skew() – наклоняет элемент на заданный угол на плоскости;
- skewX() – наклоняет элемент вдоль оси X;
- skewY() – наклоняет элемент вдоль оси Y;
- matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
- matrix3d() – задает трехмерную матрицу преобразований;
- perspective() – задает перспективу (глубину сцены);
- none – отменяет эффекты трансформации для данного элемента.
Если необходимо применить к элементу сразу несколько трансформаций, то свойству transform разрешается передавать требуемое количество функций, перечисляя их через пробел. При этом важно помнить, что порядок перечисления функций имеет значение, т.к. трансформации будут выполняться последовательно.
Также следует иметь в виду, что в результате трансформации элемент остается в общем потоке документа и его место не занимается другими элементами из потока. Поэтому нужно быть внимательными при использовании трансформации элементов и следить за тем, чтобы они не заползали на соседние элементы страницы.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-transforms-1/#propdef-transform
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transform
Подробно о трансформации элементов в нашем учебнике здесь.
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформляем родительский «div» абзацев */ div{ width: 550px; height: 1200px; margin: auto; padding: 40px; background-color: #DFDFDF; border-radius: 5px; } /* Это общий стиль абзацев */ p{ width: 280px; margin: auto; margin-top: 7em; padding: 30px; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; } /* Это класс 1-го трансформированного абзаца */ .p_1{transform: translate(-70px, 30px);} /* Это класс 2-го трансформированного абзаца */ .p_2{transform: rotate(-0.31rad);} /* Это класс 3-го трансформированного абзаца */ .p_3{transform: skew(-0.1turn, 10grad);} </style> </head> <body> <div> <p> Простой абзац.<br> </p> <p class="p_1"> 1-й трансформированный абзац: <br> transform: translate(-50px, 50px) </p> <p class="p_2"> 2-й трансформированный абзац: <br> transform: rotate(-0.31rad) </p> <p class="p_3"> 3-й трансформированный абзац: <br> transform: skew(-0.1turn, 10grad) </p> </div> </body> </html>
Пример №1