transform в CSS

Содержание

Про CSS

Transform

Css transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

Используя свойство transform можно задавать элементу одну и более функций для трансформации. Все функции можно найти тут: Transform Functions

Возможные значения: none или функции трансформаций через пробел.

Важно помнить, что функции применяются в той последовательности, в какой записаны, и предыдущие функции могут влиять на следующие. То есть строчки

дадут совершенно разный результат, а строчка:

повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.

Transform-origin

Свойство определяет центр трансформации.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Исходное значение: 50% 50% — центр элемента.

Координаты отсчитываются от верхнего левого угла элемента. Если задано только одно значение, второе принимает значение center . Если задано два значения, третье принимает значение 0.

Transform-style

Определяет поддержку 3D внутри трансформируемого элемента.

flat — трансформируемый элемент плоский preserve-3d — трансформируемый элемент имеет внутренний объем

Следующие свойства могут перекрывать действие transform-style: preserve-3d; и делать отображение элемента плоским независимо от значения transform-style :

overflow с любым значением кроме visible opacity с любым значением кроме 1 (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем transform-style: preserve-3d; . На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским. filter с любым значением кроме none

Perspective

Свойство определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена в сторону зрителя. Задается родителю трансформируемых элементов.

Возможные значения: none или длина в пикселях.

Perspective-origin

Отвечает за расположение точки, от которой отсчитывается перспектива. По сути, задается положение зрителя относительно сцены.

Возможные значения: расстояния в пикселях или процентах или ключевые слова ( left , center , right , top , bottom ).

Backface-visibility

Определяет видимость задней стороны объекта.

Возможные значения: visible — объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию). hidden — скрывать объект, если он повернут «спиной».

transform css

transform: scale(2, 2);

transform: skew(-30deg, -20deg);

transform: translate(40px, -40px);

Я люблю свою работу,
Я приду сюда в субботу
И конечно в воскресенье.

Здесь я встречу день ражденья,
Новый год, 8 марта,
Ночевать я буду завтра!

Если я не заболею,
Не сорвусь, не озверею,
Здесь я встречу все рассветы,
Все закаты и приветы.

От работы дохнут кони,
Ну, а я. БЕССМЕРТНЫЙ ПОНИ!

16 комментариев:

NMitra Про запятые думаю понятно — задаём группу свойств одним и тем же классам, id.

Остальное не могу со 100% уверенностью сказать, только догадки, поскольку информации толком не изучала. Почитаю, напишу статью. NMitra Посмотрите эту статью http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html. Я думаю, что вам всё это знакомо.

Вторую планирую в том же духе. Хотя для большинства моих читателей — это китайская грамота. Космо Мизраил Горыныч Знак >
Означает, что элемент должен быть прямым наследником указанного, т.е. при div > span <. >
div -> span работает, а вот
div -> p -> span — не работает.

Знак +
Просто выбирает элемент, который стоит сразу после указанного. Очень часто используется при создании всплывающих подсказок.

Обратен знаку + . Выбирает эл-т перед указанным.

Вот такая вот арифметика :)
также знак

используется при сравнении параметров; правило исполняется, если есть указанное слово в указанном параметре, например:
p[title

CSS свойство transform

Свойство transform применяет к элементу 2D или 3D трансформацию. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

В качестве значения свойства transform выступает одна или несколько функций трансформации (разделяемых пробелами), которые будут применятся в том порядке, в котором они определены.

CSS синтаксис

Возможные значения

Функция scale масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0,5) уменьшит элемент в 2 раза. Предоставление различных значений будет искажать элемент.

По умолчанию масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Чтобы изменить поведение по умолчанию нужно воспользоваться свойством transform-origin.

Трансформации, переходы и анимации

Трансформации

Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform .

Вращение

Для поворота элемента свойство transform использует функцию rotate :

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

При этом можно отметить, что при повороте вращаемый элемент может накладываться на соседние элементы, так как сначала происходит установка положения элементов и только затем поворот.

Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

Масштабирование

Применение масштабирования имеет следующую форму:

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 — к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 — к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали — в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() — по вертикали. Например:

Используя отрицательные значения, можно создать эффект зеркального отражения:

Перемещение

Для перемещения элемента используется функция translate :

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y — по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS — em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

Кроме положительных значений также можно использовать и отрицательные — они перемещают элемент в противоположную сторону:

Наклон

Для наклона элемента применяется функция skew() :

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй — значение наклона по оси Y.

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

Или наклон на 45 градусов только по оси Y:

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

Примеры свойства transform в CSS

Чем ещё можно привлечь внимание пользователя? Например, при наведении курсора наша кнопочка могла бы двигаться, вращаться, искажаться или масштабироваться.

Продолжим наш эксперимент с CSS трансформацией кнопки, начатый в предыдущей статье.

Эффекты трансформации можно увидеть при наведении мыши на элементы. демо

Поворот кнопки transform: rotate

Сделаем так, что при наведении курсора, кнопка повернется на 15 градусов. Для этого создадим для кнопки класс .button_rotate и пропишем в псевдокласс hover (состояние при наведении) свойство transform: rotate.

.button_rotate:hover <
background-color: #4feac8;
transform: rotate(15deg);
>

Обратите внимание, что теперь мы добавили свойство transform не к элементу, а к его состоянию, в отличии от transition. Благодаря тому, что свойство transition со значением all все ещё прописано у элемента, то сама трансформация при наведении происходит плавно. Таким образом, прописав all, мы убиваем двух зайцев, плавный переход работает как для замены цвета, так и для поворота кнопки при наведении.

transition: all 1s ease;

Перемещение кнопки transform: translate

CSS свойство translate – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.

.button_translate:hover <
background-color: #4feac8;
transform: translateX(50%);
>

Масштабирование кнопки transform: scale

CSS свойство scale – масштабирует кнопку как в сторону увеличения, так и уменьшения, в зависимости от заданного значения.

.button_scale:hover <
background-color: #4feac8;
transform: scale(2); /* Увеличивает в 2 раза */
>

Искажение кнопки transform: skew

CSS свойство skew – перемещает кнопку по горизонтали и вертикали на заданное в скобочках значение.

.button_skew:hover <
background-color: #4feac8;
transform: skew(20deg);
>

Как насчет кроссбраузерности?

Идем на сайт Can I Use и проверяем. Все вышеперечисленные свойства поддерживают почти все обновляемые браузеры, кроме Opera Mini.

Проблема наблюдается, как всегда у старых браузеров IE и Safari, которая вполне решаема, если добавить в код с псевдоэлементом hover, следующие префиксы с соответствующими свойствами.

-ms-transform: rotate(15deg); /* IE 9 */
-webkit-transform: rotate(15deg); /* Safari */

Вы скажите, ну хорошо, теперь я знаю кое-что о CSS трансформации. Но ведь этого мало, просто знать эти замечательные свойства, уметь примитивно двигать и поворачивать разные элементы сайта, как 3-ёх летний ребенок. Нужна какая-то осмысленность и целесообразность.

Анимация кнопки с помощью transform rotate

Давайте сделаем кнопку с иконкой, при наведении на которую, шестеренки будут весело и быстро вращаться, сделав один полный оборот.

Как всегда, начнем с HTML разметки:

В CSS создадим класс для кнопки:

.button_anime <
background-color: #2bc6a4;
border: none;
border-radius: 15px; /* Закругляем углы */
color: #fff;
display: block; /* Это блоковый элемент */
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: 25%;
margin: auto;
font-family: sans-serif;
font-size: 22px;
text-decoration: none;
transition: all 1s ease; /* Плавный переход */
line-height: 39px; /* Вертикальное выравнивание текста */
>

Для иконки подбираем позиционирование относительно блока с кнопкой.

img <
position: relative;
left: -245px;
top: 6px;
border: none;
transition: all 1.5s ease; /* плавное вращение, без transition эффект не виден */
>

Важно! Распространенная ошибка новичков, в том, что они не прописывают свойство transition для анимируемого элемента. Без transition в селекторе img, вращение иконки будет происходить настолько быстро, что мы его не заметим.

Ну и последний фрагмент CSS кода, отвечает за само действие transform. При наведении на иконку, она поворачивается на 360 градусов.

.button_anime:hover img <
transform: rotate(360deg); /*Поворот иконки на 360 градусов*/
>

Пример вращения иконки при наведении курсора находится в самом низу демо-страницы: демо

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Свойство transform: трансформация элементов

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

    В каких случаях можно применять свойство transform? В любых, где вам требуется трансформация элемента. Например, когда вам необходимо реализовать сдвиг или приближение/отдаление элемента при наведении курсора либо просто разместить элемент с небольшим наклоном. Само собой, transform широко применяется в веб-анимации, но еще его нередко используют для позиционирования и центрирования элементов.

    Поведение элементов

    Следует учитывать, что трансформированные элементы не влияют на размещение своих соседей. Передвинутый, наклоненный, увеличенный элемент может перекрыть соседний, наложиться на него. Это работает так потому, что при рендеринге веб-страницы браузер резервирует для элемента то место, где он находился бы до трансформации, после чего применяет стили преобразования. Преобразованный элемент никак не затрагивает положение соседних элементов. Пожалуй, это логично, ведь в противном случае мы бы иногда наблюдали весьма странную картину на веб-странице.

    Кроссбраузерность

    Internet Explorer вплоть до 8-й версии не поддерживает трансформацию элементов. Для обеспечения корректной работы в других браузерах свойство CSS3 transform требует использования вендорных префиксов:

    • -ms-transform — для Internet Explorer 9;
    • -webkit-transform — для Chrome 35 и ранее, Safari до версии 8 включительно, Opera с версии 15 до 22, Android 4.4.4 и ранее, iOS Safari до версии 8.4 включительно;
    • -o-transform — для браузера Opera 11.5;
    • -moz-transform — для Firefox до версии 15 включительно.

    В следующих частях урока, посвященного свойству transform, мы познакомимся со значениями, которые оно принимает. И начнем мы с функции вращения rotate().

    Трансформация

    На этой странице

    CSS-свойство transform позволяет вам поворачивать, маштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

    The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

    Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

    Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа.

    Синтаксис

    Свойство transform может быть указано как значение ключевого слова none или как одно или более значений «> .

    Свойство CSS 3 transform

    Приветствую, уважаемые товарищи.

    Сегодня анализу подвергнется ещё одно свойство из CSS 3 — transform — то-бишь транформирование, или преобразование, если угодно. С его помощью можно изменять масштаб контейнера, наклонять и даже вращать элементы. Только, в противовес какому-нибудь width:50% , манипуляция производится над всем элементом, включая его содержимое.

    Вся суть преобразований сводится к «матричному колдунству». Вырожденная матрица 3×3 имеет вид:

    Где a и d отвечают за горизонтальное и вертикальное масштабирование, b и c — наклоны по осям, e и f — смещения. Это базовая матрица, все преобразования обсчитываются на её основе.

    Если интересно, почему именно так, смотрите информацию на офсайте.

    Для использования CSS свойста пишем что-то вроде:

    Функции рассмотрим чуть ниже, прежде же необходимо знать про ещё одно свойство:

    Где x и y — координаты точки (отсчитывается от левого верхнего угла элемента), относительно которой производятся преобразования. В качестве значений подходят единицы измерения CSS: px, em и т. д. Можно использовать проценты. Имеются ключевые слова: left, center, right для x (расположить точку слева, по центру или справа); top, center, bottom для y (вверху, по центру или внизу). Позиция по умолчанию:

    Это означает, что все преобразования будут происходить относительно центра элемента.

    На самом деле, общий код функции содержит ещё одну, третью, переменную — z . Это может натолкнуть на мысль, что трансформации применимы к трём измерениям. Мысль верна. Применив функцию perspective для свойства transform , можно задать расстояние между «глазами» пользователя и элементом. Более подробно о 3D поговорим, скорее всего, в одной из следующих статей.

    Переходим к самому интересному. Как и в случае transition, здесь используется одна универсальная функция, на основе которой базируются остальные.

    matrix

    Функция представлена в виде matrix(a, b, c, d, e, f) . Что обозначает каждое значение написано чуть выше. Чтобы было понятно, общий код:

    Элемент, к которому применяется трансформация, будет в 2 раза шире исходного размера.

    Визуальная составляющая поможет получить исчерпывающую информацию о каждом из значений.

    Координата трансформации X:

    Координата трансформации Y:

    Теперь посмотрим, какие из функций предопределены.

    rotate

    Вращение элемента. В качестве значения задаётся угол поворота. Поддерживаются следующие угловые размеры:

    • deg — обычные градусы, полный оборот окружности составляется 360°;
    • rad — радианы, полный оборот окружности составляет 2π;
    • grad — грады, 1 град = 1/400 окружности, таким образом, 400 град составляют полный оборот окружности;
    • turn — оборот, т. е. 1turn = 360°.

    Положительные значения вращают элемент по часовой стрелке, отрицательные — против. Возможно вы, дорогой читатель, удивитесь, каким образом поворот связан с матрицей? Насколько помню, в школьной программе разговор об этом не предусмотрен, а сама область подобных преобразований относится к высшей математике и преподаётся в вузах. Поворот — сочетание наклонов и масштабирований, состоящих в строгом отношении друг относительно друга:

    Удивлены? Представьте, что нужно повернуть элемент на 90°. Косинус этого угла равен нулю, синус — единице. Устанавливаем на форме значения масштабов в ноль, горизонтальный наклон — -1, вертикальный — 1. Получилось? ;-)

    В коде это выглядит так:

    Второй вариант понятнее, но и первый знать просто полезно.

    scale

    Масштабирование. Значение по умолчанию — 1, т. е. оригинальный масштаб. Числа больше единицы приводит к увеличению элемента, меньше единицы — к уменьшению. Отрицательные значение работают аналогично, только зеркально «отражают» элемент. Запись функции: scale(scX, scY) . Где scX и scY — численные значения. Характерная особенность — при задании одного параметра масштабирование распределяется по горизонтали и вертикали.

    Определены функции изменения масштаба по осям:

    • scaleX(scX) — масштабирование по ширине (ось X), аналогично scale(scX, 1) ;
    • scaleY(scY) — наклон по высоте (ось Y), аналогично scale(1, scaleY) .

    Масштабирование выполняется пропорционально, например, значение 2 ровно в 2 раза увеличит элемент, а 0.1 уменьшит в 10 раз.

    Представление данной функции можно напрямую перенести в общий вид:

    Функция наклоняет элемент относительно осей. Общая запись: skew(angleX, angleY) . Единицами измерений являются уже озвученные выше угловые величины. Имеются функция для задания наклонов по осям:

    • skewX(angleX) — наклон по оси X, аналогично skew(angleX) ;
    • skewY(angleY) — наклон по оси Y, аналогично skew(0, angleY) .

    В коде, с использованием matrix имеет вид:

    translate

    Производит смещение элемента по осям X и Y. В качестве значений необходимо указывать поддерживаемые размерные единицы: px, em и пр. Есть функции для смещения по конкретным осям:

    • translateX(valX) — смещение по X, аналогично translate(valX) ;
    • translateY(valY) — смещение по Y, аналогично translate(0, valY) .

    Как несложно догадаться, вызов имеет вид:

    Положительные значения для X смещают элемент вправо, для Y — вниз. Отрицательные значения, соответственно, влево и вверх.

    Прочие свойства и функции

    Были рассмотрены лишь 2D эффекты. Но многие браузеры в полной мере поддерживают третье измерение. Можно работать с 3D (рассмотренные выше функции являются, по сути, частным случаем, который имеет место при «выбрасывании» одного измерения). Можно задать поведение внутренник элементов (лежат ли они в одной плоскости с изменяемым, либо представлены в трёх измерениях); за это отвечает свойство transform-style , которое принимает значение flat (по умолчанию), либо preserve-3d (отображение вложенных элементов в 3D).

    Для выполнение операций над элеменами в 3D имеются функции matrix3d() и perspective() . Возможно, в одной из следующих статей я придумаю интересный способ для объяснения работы с ними. Сейчас же можно в полной мере оценить трансформирование элементов и даже создать на их основе вёрстку, которую раньше можно было сделать лишь с помощью точечного позиционирования и работой с фоновыми изображениями.

    CSS 3 сделал огромный шаг вперёд. С одной стороны, это позволяет избавиться от всяких хаков и воплощать действительно сложные дизайны. С другой — довольно сильно усложнились стили, что делает полноценное использование, в большинстве случаев, недоступным для прозрачного использования большинством пользователей.

    CSS стиль transform. Правила трансформации объектов.

    Internet Explorer 9 поддерживает свойство -ms-transform.

    Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

    Opera с версии 15 до 23 поддерживает свойство -o-transform.

    Firefox до версии 16 поддерживает свойство -moz-transform.

    Трансформации преобразовывают элемент, не влияя на остальные части веб-страницы, — это значит, что другие объекты не будут относительно него сдвигаться. По умолчанию трансформации происходят относительно центра элемента. Свойства при этом не наследуются.

    Краткая информация по CSS-свойству transform

    Значение Описание
    none Трансформация не применяется.
    matrix(n,n,n,n,n,n) Применяет 2D трансформцию с помощью матрицы из шести значений.
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D трансформацию с помощью матрицы из шестнадцати (4х4) значений.
    translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению свойства «position: relative;«. При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
    translate3d(x,y,z) Применяет 3D смещение.
    translateX(x) Применяет смещение, только по оси Х.
    translateY(y) Применяет смещение, только по оси Y.
    translateZ(z) Применяет смещение, только по оси Z.
    scale(x,y)
    Значение по умолчанию none
    Наследуется Нет
    Применяется К трансформируемым элементам

    Правила написания свойства transform

    Здесь — функция трансформации. Значение none отменяет трансформацию.

    Функции трансформации

    Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

    Масштаб элемента по горизонтали и вертикали. Значение 1 — уменьшает.

    Масштабирует элемент по горизонтали.

    Масштабирует элемент по вертикали.

    Наклоняет элемент на заданный угол по вертикали.

    Наклоняет элемент на заданный угол по горизонтали.

    Сдвигает элемент на заданное значение по горизонтали и вертикали.

    Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

    Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

    CSS3 — трансформации

    Когда мы изучали возможности HTML5 Canvas, то затронули возможность трансформаций — способов перемещения, масштабирования, наклона и вращения содержимого. На холсте трансформации можно использовать для изменения рисуемой на нем графики. А трансформации CSS3 служат для изменения внешнего вида элементов. Далее мы рассмотрим каждый вид CSS3-трансформаций.

    Поворот

    Трансформации CSS3 являются новой и экспериментальной возможностью. Поэтому при их использовании нужно указывать несколько версий свойства transform, каждую со своим префиксом разработчика браузеров. Далее приведен пример правила трансформации для вращения элемента со всем его содержимым:

    В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:

    Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.

    Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:

    Единицы измерения угла поворота CSS3-трансформации

    Единица измерения CSS3-обозначение Описание Пример
    Градусы deg Угол полной окружности 360° rotate(90deg)
    Грады grad Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 rotate(100grad)
    Радианы rad 2π радиан равно углу полной окружности rotate(1.57rad)
    Обороты turn 1 угол полной окружности равен одному обороту rotate(.25turn)

    Ниже показан пример правила таблицы стилей в котором используется такая же трансформация как и раньше, только с заданием другой единицы измерения:

    Масштабирование

    Для использования анимации масштабирования используется функция scale(). Значение масштаба задается относительно единицы: scale(2) — исходный элемент будет увеличен в два раза, scale(0.5) — элемент уменьшается в два раза. Согласно этим правилам элемент масштабируется одинаково во все стороны, но вы можете задать направление: X — по горизонтали, Y — по вертикали, Z — глубина масштабирования.

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

    Теперь растянем элемент в два раза по оси X:

    Как видите здесь уже используется функция scaleX(), которая масштабирует элемент относительно оси X. И наконец, используем эффект отражения:

    Перемещение

    Для перемещения HTML-элемента используется функция translate(x,y), либо ее аналоги для конкретных осей translateX(x), translateY(y). Эти функции поддерживают отрицательные значения (сдвиг влево или вверх). Ниже показан пример использования трансформации перемещения:

    Искажение

    Трансформация skew() искажает форму элемента. Например, возьмем правильный прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю часть в сторону, то она сместится, в то время как основание останется на месте. В результате получим параллелограмм:

    Значение искажения задается в градусах (можно указывать такие же единицы измерения, как и для трансформации поворота). Ниже показан пример использования трансформации искажения:

    Использование нескольких трансформаций

    Вы можете объединить несколько трансформаций двумя способами: указать несколько трансформаций в одном правиле, разделив их пробелами или использовать , которая позволяет комбинировать несколькими трансформациями с помощью математической матрицы. Более подробно о матричной трансформации вы можете прочитать на сайте разработчиков браузера Opera — CSS Transforms Matrix, а ниже мы рассмотрим пример группирования нескольких трансформаций в одном правиле:

    Сначала элемент увеличивается в полтора раза (используя трансформацию scale), потом перемещается на 10 пикселов влево (посредством трансформации translateX) и, наконец, наклоняется и поворачивается (используя трансформации skew и rotate).

    Илон Маск рекомендует:  Линейный градиент
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL