CSS-трансформации. Матрица преобразований


Содержание

Как использовать преобразование матрицы и другие свойства CSS преобразования?

при использовании свойства transform в CSS одним из возможных методов является matrix метод, который требует 6 полей ввода. Код CSS будет выглядеть примерно так.

есть также несколько других вариантов (в зависимости от браузера).

Я знаю, что значения, показанные выше, являются значениями запаса для объекта, но что означают все числа или делают?

2 ответов

свойство преобразования, упомянутое выше, попадает в 2D преобразований категория свойств CSS. Вместе с matrix() метод, упомянутый выше, есть несколько других методов, которые сопровождают преобразование:

translate() , rotate() , scale() и skew()

понять matrix() метод, лучше всего сначала понять остальные четыре типа.

преобразования:

эти четыре способа трансформация-это именно то, что они звучат.

перевод:

Проверьте перевести пример здесь.

translate(e, f) принимает два аргумента. Первый аргумент-это x-позиция элемента, а второй — y-позиция-оба относительно его начальной позиции. Если вы хотите переместить элемент 50px вправо и 100px вниз, CSS будет выглядеть как transform: translate(50px, 100px); . Положительный X справа положительный Y вниз; отрицательные числа перемещают элемент в противоположном направлении.

поворот:

Проверьте rotate example здесь.

rotate(c) принимает один аргумент, который является количеством вращения, которое вы хотите, чтобы элемент имел. Положительное вращение по часовой стрелке, отрицательное против часовой стрелки. Поворот элемента на 30 градусов по часовой стрелке (положительный) будет выглядеть как transform: rotate(30deg); . Обратите внимание, что на этот раз аргумент находится в deg и не px .

данные:

Проверьте пример масштаба здесь.

scale(a, d) принимает два аргумента. Первый аргумент-это сумма для масштабирования в X-направлении, а второй аргумент-сумма для масштабирования в Y-направлении. Масштабирование работает умножение текущее значение (ширина, высота) по значению шкалы. Масштабирование элемента в 2 раза в направлении X и 4 раза в направлении Y будет выглядеть как transform: scale(2, 4); . Аргументами могут быть любые значения, в том числе десятичные, и даже отрицательные. Отрицательные значения имеют эффект переворачивания элемента вокруг соответствующей оси.

SKEW:

Проверьте пример перекоса здесь.

skew(b, c) потенциально является самым запутанным преобразованием для объяснения. skew(c, d) принимает два аргумента. Первый аргумент соответствует горизонтальным поверхностям (сверху и снизу), а второй-вертикальным поверхностям (слева и справа). Оба аргумента находятся в deg , то есть rotate() . Положительные значения для первого аргумента будут вращать вертикальные поверхности против часовой стрелки вокруг их Центра точки. Отрицательные значения будут вращать вертикальные поверхности по часовой стрелке вокруг их центральных точек. Положительные значения для второго аргумента вращают горизонтальные поверхности по часовой стрелке вокруг их центральных точек, а отрицательные — против часовой стрелки. Предел (в deg) для каждого аргумента равен +-90deg — как показано в следующем примере.

матрица:

проверить пример матрицы здесь.

matrix(a, b, c, d, e, f) делает все, что делает ранее перечисленное преобразование.

два аргумента, a и d предназначены для масштабирования элемента в направлении X и направлении Y соответственно. тож до scale(a, d) метод.

второй и третий аргументы b и c для смещения элемента. Эти два значения работают тож в что из skew(b, c) метод.

наконец, последние два аргумента e и f предназначены для перевода элемента в направлении X и направлении Y соответственно. тож до translate(e, f) метод.

вы можете использовать matrix() преобразование для достижения невероятного количества эффектов. Взгляните на этой веб-сайт, где прокрутка страницы (на компьютерах, а не на мобильных устройствах) вызывает элементы на странице преобразование через matrix() метод. Это делает для большого эффекта!

наконец, существует Различный синтаксис для разных браузеров. По данным w3schools здесь они следующие

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

для получения дополнительной информации о различных 2D преобразований, проверить этой ссылке. Для математики за matrix() способ, проверить вон!—157этой ссылке.

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

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

Трансформация элементов. Часть 2.

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

Сдвиг элементов

Следующая функция преобразования translate() , определяет двухмерное преобразование путем сдвига элемента влево, вправо, вверх или вниз, используя координаты по оси X и Y (отрицательные значения отвечают за сдвиг влево и вверх, положительные за сдвиг вправо и вниз).

Обращаю Ваше внимание, что элемент, к которому применяется сдвиг не влияет на поток документа (элемент перекрывает другие элементы), это правило верно и для других трансформаций.

Давайте перейдем к примеру:

В этом примере мы использовали различные значения для функции translate() . Первое значение функции определяет горизонтальный сдвиг элемента (положительное значение сдвигает элемент вправо по оси X, а отрицательное влево по оси X). Второе значение функции определяет вертикальный сдвиг элемента (положительное значение сдвигает элемент вниз по оси Y, а отрицательное вверх по оси Y). Если указать значение 0 для любой оси, то элемент не будет по ней сдвигаться, по аналогии с другими функциями.

Результат нашего примера:

Рис. 181 Пример сдвига элементов (функция преобразования элемента translate).

Вы можете проводить преобразование путем сдвига элемента и для конкретной оси, для этого в CSS существуют функции преобразования translateX() , translateY() и translateZ() . Рассмотрим их в следующем примере:

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

Для демонстрации работы трехмерного сдвига элемента функцией translateZ() , мы добавили функцию rotateX() , которая поворачивает наш элемент по оси X и функцию преобразования perspective() , которая определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины.

Результат нашего примера:

Рис. 182 Сдвиг элементов по конкретным осям (функции преобразования элементов translateX, translateY и translateZ).

Трехмерный сдвиг элементов

Следующая функция — translate3d() позволяет нам задать трехмерное преобразование путем сдвига элемента, используя координаты трёх осей (X,Y и Z). Перейдем к примеру:

По аналогии с ранее рассмотренными функциями сдвига элементов, функция translate3d() задаёт сдвиг одновременно по осям X,Y и Z. Первое значение функции определяет горизонтальный сдвиг элемента (положительное значение сдвигает элемент вправо по оси X, а отрицательное влево по оси X). Второе значение функции определяет вертикальный сдвиг элемента (положительное значение сдвигает элемент вниз по оси Y, а отрицательное вверх по оси Y). Третее значение функции определяет сдвиг по оси Z (отрицательное значение отдаляет элемент). Если указать значение 0 для любой оси, то элемент не будет по ней сдвигаться, по аналогии с другими функциями.

Результат нашего примера:

Рис. 183 Пример трехмерного сдвига элементов (функция преобразования элемента translate3d).

Перспектива обзора элемента

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

Для демонстрации функции perspective() мы дополнительно на элемент воздействуем функцией rotateX() , благодаря, которой поворачиваем элемент по оси X на 45 градусов.

Результат нашего примера:

Рис. 184 Пример указания перспективы обзора элемента (функция преобразования элемента perspective).

Матрицы преобразований

В CSS все трансформации (функции, которые контролируют преобразования элементов) основаны на следующих двух функциях:

  • для двухмерных преобразований это функция matrix() , она определяет двухмерное преобразование с помощью матрицы из шести значений.
  • для трехмерных преобразований это функция matrix3d() , она определяет трехмерное преобразование с помощью матрицы 4×4 из шестнадцати значений в порядке столбцов.

Давайте рассмотрим из чего состоит матрица для двухмерных преобразований:

Рис. 185 Матрица двумерной трансформации.

  • а и d определяют масштабирование по осям X и Y ( scale ).
  • b и c определяют наклон по осям X и Y ( skew ).
  • e и f определяют сдвиг элемента по осям X и Y ( translate ).

Когда мы применяем двумерную трансформацию, браузер умножает матрицу на вектор [x, y, 1]. Значения X и Y — координаты конкретной точки в локальном пространстве координат.

Рис. 186 Умножение матрицы на вектор.

Матрица для элемента, без преобразования будет выглядеть следующим образом:

Достаточно будет понять того, что у каждого типа трансформаций — своя собственная матрица, давайте рассмотрим пример их использования:

В этом примере с помощью функций matrix() и matrix3d() мы производим различные двухмерные и трехмерные трансформации элементов.

Результат нашего примера:

Рис. 187 Пример использования матриц преобразования в CSS.

При необходимости, вы можете получить более подробное описание функции matrix3d() здесь (на русском), либо в стандарте W3C — разделы 20 и 21.

Точка преобразования элемента

При использовании любого преобразования, браузер пользователя по умолчанию использует в качестве точки начала преобразования центр элемента. В CSS свойство transform-origin позволяет указать произвольное начало координат преобразования элемента. Вспомните, похожее поведение имеет свойство background-position , которое позволяет задать положение (позицию) фонового изображения, мы подробно рассматривали это свойство в статье «Работа с фоном элемента в CSS».

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

Для наглядности логика работы свойства transform-origin отображена на изображении:

Рис. 188 Логика работы свойства transform-origin.

  1. Первое значение указывает положение на оси X. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: left (указывает 0% длины по оси X), center (указывает среднюю точку) или right (указывает 100%). Может быть указано вторым значением при использовании ключевых слов. Допускаются отрицательные значения.
  2. Второе значение указывает положение на оси Y. Допускается использование числовых значений длины (допустимые единицы измерения CSS), процентное соотношение или одно из следующих трех ключевых слов: top (указывает 0% длины по оси Y), center (указывает среднюю точку) или bottom (указывает 100%). Может быть указано первым значением при использовании ключевых слов. Допускаются отрицательные значения.
  3. Третье значение указывает положение на оси Z. Допускается использование только числовых значений длины (допустимые единицы измерения CSS). Допускаются отрицательные значения.

Перейдем к примеру.

В этом примере мы использовали для свойства transform-origin различные значения, которые определяют точку начала преобразования элемента. Для пятого и шестого блока мы дополнительно указали значение функции преобразования perspective() для возможности демонстрации изменения точки преобразования по оси Z.


Результат нашего примера:

Рис. 189 Пример изменения точки преобразования элемента.

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

Мы с Вами рассмотрели все функции преобразования элементов, которые в настоящее время используются в той, или иной степени. Если Вас заинтересовала эта тема, вы можете самостоятельно изучить такие современные, но мало используемые свойства CSS, как:

  • perspective — определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины (значение перспективы устанавливается для вложенных (дочерних) элементов (находящихся под действием трехмерной трансформации), а не к самому элементу, как мы это делали с использованием функции perspective() .
  • perspective-origin — устанавливает начало координат для свойства перспективы (позиционирование перспективы происходит для вложенных (дочерних) элементов).
  • transform-style — определяет как вложенные (дочерние) элементы отображаются в трехмерном пространстве. По умолчанию все дочерние элементы отображаются плоскими в двухмерной плоскости (находятся в плоскости самого элемента), свойство позволяет вложенным (дочерним) элементам изменить это поведение и трансформироваться в их собственной трёхмерной плоскости (Internet Explorer не поддерживает).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

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

    Практическое задание № 36.

    • Для начала Вам необходимо спозиционировать родительский элемент и задать его детям, абсолютное позиционирование. Эту тему мы подробно рассматривали ранее в статье «Позиционирование элементов в CSS».
    • Вам необходимо для двух вложенных элементов применить трансформацию с функцией rotate() , а для двух других translateY() . Кроме того, необходимо для двух элементов изменить точку начала преобразования.
    • Для того, чтобы запустить трансформацию родительского элемента, после того как закончится трансформация вложенных элементов, Вам необходимо указать для всех элементов свойство эффекта перехода — transition , при том для родительского элемента необходимо задать задержку начала эффекта перехода между двумя состояниями. Эту тему мы подробно рассматривали ранее в статье «Переходные эффекты в CSS».

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

свойство Матрица преобразованийCSS3-генератор ☛

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

Двумерная матрица

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

Исходный элемент Поворот Наклон А вот так сделать нельзя

Рис. 1. Трансформация элемента

Сама матрица имеет размер 3х3 и в общем виде записывается так:

Иногда для простоты третью строку опускают, поскольку она не оказывает влияния на конечный результат. Новые координаты каждой точки элемента получаются путём умножения матрицы преобразований на матрицу координат.

И вычисляются по следующей формуле:

Роль каждого коэффициента матрицы представлена в табл. 1.

Табл. 1. Коэффициенты матрицы преобразований

Коэффициент Преобразование Описание
a Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1, наоборот, сжимает.
b Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз.
c Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
d Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
tx Смещение по горизонтали в пикселях. Положительное значение сдвигает элемент вправо на заданное число пикселей, отрицательное значение сдвигает влево.
ty Смещение по вертикали в пикселях. При положительном значении элемент опускается на заданное число пикселей вниз или вверх при отрицательном значении.

Для матрицы преобразований применяется функция matrix() , внутри скобок перечисляются коэффициенты.

Единичная матрица

Если в матрице коэффициенты a и d равны 1, а остальные элементы матрицы нулевые, то такая матрица называется единичной. Эта матрица применяется по умолчанию, поскольку не приводит к какой-либо трансформации элемента. Так что если необходимо произвести только один вид преобразований, единичную матрицу надо брать в качестве основы.

Масштаб по горизонтали

Чтобы увеличить размер элемента, допустим, в два раза по горизонтали, коэффициент a следует установить равным 2, а остальные коэффициенты оставить как в единичной матрице.

Считаем новые координаты:

x’ = 2*x + 0*y + 0
y’ = 0*x + 1*y + 0

Код для масштабирования показан в примере 1.

Пример 1. Масштабирование

Результат данного примера показан на рис. 2. Блок с текстом растягивается на 20% по горизонтали.

Рис. 2. Изменение масштаба текста

Отражение

Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1 или оба значения одновременно для отражения одним разом по горизонтали и вертикали.

В примере 2 показано отражение текста по вертикали.

Пример 2. Отражение

Результат данного примера показан на рис. 3.

Рис. 3. Отражение текста по вертикали

Наклон

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим c=1 и посмотрим, какие преобразования получатся.

x’ = 1*x + 1*y + 0
y’ = 0*x + 1*y + 0

Таким образом, меняется только координата x, которая увеличивается на значение y, что и приводит к наклону элемента. В примере 3 используется отрицательное значение коэффициента c для наклона вправо.

Пример 3. Наклон

Результат данного примера показан на рис. 4.

Рис. 4. Наклон блока

Поворот

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

Сам поворот происходит по часовой стрелке, α задаёт угол поворота в градусах.

Перемещение

За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселей.

Трёхмерная матрица

Трёхмерная матрица имеет размер 4х4 и применяется для преобразования координат элемента в трёхмерном пространстве. В общем виде она выглядит так:

Название «трёхмерная» лишь отражает тот факт, что матрица предназначена для работы в 3d-пространстве. Двумерная матрица является её частным случаем и для размера 4х4 имеет следующий вид:

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

Как разобрать matrix на scale, rotate, translate, skew?

Дело такое, getComputedStyle(element).getPropertyValue(«transform») возвращает matrix(a, c, b, d, tx, ty) . C translate всё вроде бы просто: translateX = tx , translateY = ty . А вот как вытащить scale, rotate, skew я немного не понимаю потому как во первых в rotate и scale должны быть градусы, во вторых: вроде как skewX = b , skewY = c , а scaleX = a , scaleY = d , но при этом что бы повернуть элемент в матрице a = cos(x) , b = sin(x) , c = -sin(x) , d cos(x) . Вообщем из набора параметров matrix я бы ещё составил а вот из matrix вытащить параметры вообще не понимаю как. Подскажите пожалуйста как перевести матрицу в понятный простому человеку язык или подскажите как можно получить свойство transform не в matrix , а в scale , rotate , translate , skew ?

1 ответ 1

В черновике спецификации описано какие значения, что означают.

Трансформации осуществляются с помощью матрицы трансформаций, в общем случае (3D) матрица 4х4

Матрица, которую вы получаете matrix(a, c, b, d, tx, ty) представляется в следующем виде:

Как вы правильно отметили: tx, ty — отвечают за перемещение.

За масштабирование отвечают значения лежащий на главной диагонали, в нашем случае это a,d , при это a — масштабирование по ширине, d — по высоте.

c,b — отвечают за наклон

и все вместе a,b,c,d — за поворот.

Подробнее можно увидеть на картинке

Такие преобразования называются Афинными, подробнее о них можно узнать:

Трансформация элементов

Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам «по сердцу», особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

Свойство transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

Масштабирование элемента — функция scale()

По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1) — это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5) . Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):


Как это выглядит на практике можно посмотреть в примере ниже:

Поворот rotate()

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

  • В градусах ( deg) . Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах ( grad) . Полный круг равен 400grad,
  • В радианах ( rad) . Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах ( turn) . Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно «вернуть на место», то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

Илон Маск рекомендует:  Iis использование списка доверенных сертификатов

Скос элемента — функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая — по оси X, вторая — по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо — при положительных значениях, влево — при отрицательных значениях). Можно указать 2 параметра — тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:

CSS-трансформации. Матрица преобразований

Матричные функции — matrix() and matrix3d() — две самые головоломные в плане понимания штуковины в CSS3-трансформациях. В большинстве случаев, ради простоты и ясности, вы будете пользоваться функциями вроде rotate() и skewY(). Но всё же за каждой трансформацией скрывается эквивалентная матрица. Полезно хоть слегка понимать, как они работают, так что давайте взглянем.

CSS-трансформации «растут» из линейной алгебры и геометрии. Хотя продвинутая математическая подготовка будет весьма не лишней, понять матричные функции можно и без нее. Но вы должны быть хорошо знакомы с CSS-трансформациями. Иначе — читайте про эффекты переходов CSS3 и 2D-трансформации.

В этой статье я охвачу как матрицы 3 на 3, используемые для двумерных трансформаций, так и матрицы 4 на 4 для трехмерных.

Заметьте, что на момент этой публикации Опера не поддерживает трехмерных трансформаций. Я включила двумерный matrix()-эквивалент, где возможно.

В этой статье я также пользуюсь беспрефиксными версиями свойств transform. На практике эти свойства всё еще экспериментальны и могут измениться. Пока они не утверждены окончательно, добавляйте в свой CSS-код версии с префиксом (напр., —o-transform).

Что такое матрица?

Матрица — это прикольный математический термин для прямоугольного массива чисел, символов или выражений (см. рис. 1). У матриц множество математических и научных применений. Физики, например, используют их при изучении квантовой механики. В области компьютерной графики они используются для вещей типа — внезапно! — линейных трансформаций и проекции трехмерных изображений на двумерный экран. Это и есть то, что делают матричные функции: matrix() позволяет нам создавать линейные трансформации, а matrix3d() дает возможность создавать иллюзию трехмерности в двух измерениях с помощью CSS.

Рис. 1. Пример матрицы

Мы не будем далеко забредать в глубины продвинутой алгебры. Вы должны быть знакомы с декартовой системой координат. Можете также освежить в памяти, как перемножать матрицы и векторы (либо воспользуйтесь калькулятором, типа предлагаемого Bluebit.gr).

Важный для понимания момент — то, что трансформация умножает матрицу на координаты точки (или точек), выраженные в виде вектора.

Трансформации и системы координат

Сначала поговорим о системах координат. Каждая область просмотра документа является системой координат. Левый верхний угол — ее начало, с координатами (0,0). Значения увеличиваются вправо по оси X и вниз по оси Y. Ось Z определяет кажущееся расстояние до зрителя в случае 3D-трансформаций. Бо́льшие значения — предметы ближе и крупнее, меньшие значения — мельче и дальше.

Когда трансформация применяется к объекту, она создает локальную систему координат. По умолчанию начало локальных координат — точка (0,0) — лежит в центре объекта, или на 50% ширины и 50% высоты (рис. 2).

Рис.2. Локальная система координат.

Мы можем изменить начало локальной системы координат подгонкой свойства transform-origin (рис. 3). Задание transform-origin: 50px 70px;, например, помещает начало координат в 50 пикселях от левого края объекта и в 70 пикселях от его верха. Трансформации каждой точки в локальной системе координат объекта рассчитываются относительно этого начала.

Рис. 3. Локальная система координат, с началом в точке (50px,70px). Также показана точка (30px,30px).

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

Расчет трансформации: математика матриц и векторов

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

Рис. 4. Матрица двумерной CSS-трансформации

Мы можем записать это как transform: matrix(a,b,c,d,e,f), где буквы от a до f — числа, определяемые типом трансформации, которую мы хотим применить. Матрицы — это рецепты тех видов трансформации, которые мы хотим применить. Это станет чуть понятнее, когда мы рассмотрим несколько примеров.

Когда мы применяем двумерную трансформацию, браузер умножает матрицу на вектор [x, y, 1]. Значения x и y — координаты конкретной точки в локальном пространстве координат.

Чтобы найти координаты после трансформации, мы умножаем каждый элемент каждой строки матрицы на соответствующую ему строку вектора. Затем складываем произведения (рис. 5).

Рис. 5. Умножение матрицы на вектор

Я знаю, что это выглядит как куча бессмысленных цифр и букв. Но, как отмечено выше, у каждого типа трансформаций — своя собственная матрица. Рис. 6 показывает матрицу для трансформации сдвига.

Рис. 6. Матрица сдвига

Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Этот вектор служит аргументом для функции matrix(), как показано ниже.

Давайте трансформируем объект, левый верхний угол которого совпадает с левым верхним углом области просмотра (Рис. 7). Его глобальные координаты равны (0,0).

Рис. 7. Объект с глобальными координатами (0,0).

Мы переместим этот объект на 150 пикселей по осям x и y, используя начало координат трансформации по умолчанию. Ниже приведен CSS для этой трансформации.

Кстати, это эквивалентно transform: translate(150px,150px). Давайте рассчитаем результат этой трансформации для точки с координатами (220px,220px) (Рис. 8).

Рис. 8. Вычисление трансформации сдвига.

Трансформации устанавливают связь координат точек и расстояний между ними в локальной системе координат объекта с координатами этих же точек и соответствующими расстояниями в предыдущей системе координат. То, где точка отобразится в области просмотра, зависит от примененного при трансформации сдвига от начальной точки объекта. В этом примере наша точка с координатами (220px,220px) теперь отображается в точке (370px,370px). Прочие координаты в границах нашего объекта тоже сместились на 150 пикселей вправо и на 150 пикселей вниз (рис. 9).

Рис. 9. Наш объект после применения трансформации.

Матрица сдвига — особый случай. Она как аддитивна, так и мультипликативна. Более простым решением было бы просто прибавить значение сдвига к значениям x и y-координат нашей точки.

Расчет трехмерной трансформации

Выше мы рассмотрели матрицу переноса 3 на 3. Давайте возьмем другой пример, с использованием матрицы 4 на 4 для масштабирования (рис. 10).

Рис. 10. Матрица 4 на 4 для масштабирования.

Здесь sx, sy и sz представляют масштабные коэффициенты по каждой оси. С функцией matrix3d это примет такой вид: transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1).

Будем продолжать с тем же объектом, что раньше. Уменьшим его масштаб по осям x и y с помощью функции matrix3d(), как показано ниже.

Это эквивалентно transform: scale3d(0.8, 0.5, 1). Поскольку мы масштабируем только по осям x и y (получая 2D-трансформацию), мы могли бы использовать также transform: matrix(.8, 0, 0, .5, 0, 0) либо scale(.8,.5). Результат трансформации виден на рис. 11.

Рис. 11. Объект 300 на 300 пикселей после применения трансформации масштабирования.

Если умножить эту матрицу на координатный вектор [150,150,1] (рис. 12), мы получим такие новые координаты нашей точки: (120,75,1).

Рис. 12: Вычисление трансформации масштабирования.

Где взять значения матриц

Значения матриц для каждой функции трансформации приведены как в спецификации Scalable Vector Graphics, так и в спецификации CSS Transforms.

Составные трансформации с помощью матриц

Наконец, давайте рассмотрим, как создать составную трансформацию — трансформацию, эквивалентную применению нескольких функций трансформации одновременно. Ради простоты ограничимся двумя измерениями. Это значит, что мы будем использовать матрицу трансформации 3 на 3 и функцию matrix(). Этой трансформацией мы повернем наш объект на 45° и увеличим его масштаб в 1,5 раза от исходного размера.

Матрица поворота, выраженная в виде вектора — [cos(a) sin(a) -sin(a) cos(a) 0 0], где a — угол. Для масштабирования понадобится матрица [sx 0 0 sy 0 0]. Чтобы объединить их, умножим матрицу поворота на матрицу масштабирования, как показано на рис. 13 (синус и косинус 45° оба равны 0.7071).

Рис. 13: Вычисление матрицы составной трансформации.

В CSS это будет выглядеть так: transform: matrix(1.0606, 1.0606, -1.0606, 1.0606, 0, 1). Рис. 14 показывает результат после применения трансформации.

Рис. 14: Наш объект 300 на 300 пикселей после масштабирования и поворота.

Теперь рассчитаем новые координаты в области просмотра для точки (298,110), как показано на рис. 15.

Рис. 15. Применение трансформации.

Новыми координатами нашей точки будут (199.393px,432.725px).

Узнать больше

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

Матрица преобразования — Transformation matrix

для некоторой матрицы , называется матрица преобразования из . Обратите внимание , что есть строки и столбцы, в то время как преобразование от до . Существуют альтернативные выражения матриц преобразования с участием векторов строк , которые предпочтительны некоторыми авторами. м × N <\ Displaystyle м \ раз п>A <\ Displaystyle A>T <\ Displaystyle Т>A <\ Displaystyle A>м <\ Displaystyle м>N <\ Displaystyle п>T <\ Displaystyle Т>р N <\ Displaystyle \ mathbb ^ <п>> р м <\ Displaystyle \ mathbb ^ <т>>

содержание

Пользы

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

Линейные преобразования не являются единственными, которые могут быть представлены матрицами. Некоторые преобразования , которые являются нелинейными на п-мерном евклидовом пространстве R п могут быть представлены в виде линейных преобразований на п + 1-мерном пространстве R п +1 . Они включают в себя как аффинные преобразования (например, перевод ) и проективные преобразования . По этой причине, 4 × 4 матрицы преобразования широко используются в 3D компьютерной графики . Эти п матриц + 1-мерные преобразования называются, в зависимости от их применения, аффинных матриц преобразования , проекционных матриц преобразования , или в более общем случае нелинейна матриц преобразования . По отношению к п — мерной матрицы, п + 1-мерная матрица может быть описана как расширенной матрицы .

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

Иными словами, А пассивное преобразование относится к описанию же объекта, если смотреть с двух различных системах координат.

Нахождение матрицы преобразования

Если есть линейное преобразование в функциональной форме, легко определить преобразование матрицы А путем преобразования каждого из векторов стандартного базиса с помощью Т , а затем вставить результат в столбцы матрицы. Другими словами, T ( Икс )


Например, функция является линейным преобразованием. Применяя описанный выше процесс (предположим , что п = 2 в этом случае) показывает , что T ( Икс ) знак равно 5 Икс

Следует отметить , что матрица представления векторов и операторов зависит от выбранного базиса; подобный матрица будет результатом альтернативной основе. Тем не менее, метод , чтобы найти компоненты остается тем же самым .

Теперь, выразить результат преобразования матрицы А , на , в данном базисе: v → <\ Displaystyle <\ VEC >>

Эти элементы матрицы А определяются для данного базиса Е, применяя к каждому , и наблюдая вектор отклика a я , J <\ Displaystyle a_ > е → J знак равно [ 00 . ( v J знак равно 1 ) . 0 ] T <\ Displaystyle <\ VEC <е>> _ = [00 \ ldots (V_ = 1) \ ldots 0] ^ >

a я , J знак равно A [ я , N ] е → J знак равно A 1 , 1 е 1 , J + A 1 , 2 е 2 , J + . + A 1 , N е N , J знак равно Σ я знак равно 1 N A 1 , я е я , J , <\ Displaystyle а_ = A _ <[я, п]><\ VEC <е>> _ = A_ <1,1>e_ <1, J>+ A_ <1,2>e_ <2, J>+ \ ldots + А_ <1, п>e_ <п, J>= \ сумма _ <я = 1>^ <п>А_ <1, я><е- I, J>.>

Это уравнение определяет элементы, разыскиваемые , из J-го столбца матрицы А. a я , J <\ Displaystyle a_ >

Базис и диагональная матрица

Тем не менее, существует специальная основа для оператора , в котором компоненты образуют диагональную матрицу и, таким образом, сложность умножения сводится к п. Будучи по диагонали означает , что все коэффициенты , но нули оставив только один член в сумме выше. Выжившие диагональные элементы, , известны как собственные значения и обозначены в определяющем уравнении, которое сводит к . Полученное уравнение называется собственным значением уравнения . Эти собственные векторы и собственные значения являются производными от нее с помощью характеристического полинома . a я , J <\ Displaystyle a_ > a я , я <\ Displaystyle a_ <я, я>> Σ a я , J е → я <\ Displaystyle \ сумма a_ <\ VEC <е>> _ <я>> a я , я <\ Displaystyle a_ <я, я>> λ я <\ Displaystyle \ Lambda _ <я>> A е → я знак равно λ я е → я <\ Displaystyle А <\ VEC <е>> _ <я>= \ Lambda _ <я><\ VEC <е>> _ <я>>

Примеры в 2D компьютерной графики

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

растягивание

Растяжение в плоскости ху есть линейное преобразование , которое увеличивает все расстояния в определенном направлении на постоянный множитель , но не влияет на расстояния в перпендикулярном направлении. Мы рассматриваем только вытянут вдоль оси абсцисс и оси ординат. Протяжение вдоль оси х имеет вид х» = кх ; у» = у для некоторой положительной константы к . (Заметим , что если к > 1, то это действительно «растянуть», если к . к = 1, то преобразование является тождеством, то есть он не имеет никакого эффекта.)

Матрица связанно с растяжением с коэффициентом к вдоль оси х определяются по формуле:

Аналогично, участок с коэффициентом к вдоль оси у имеет вид х» = х ; у» = ка , так что матрица , связанная с этой трансформацией

Сжимая

Если два отрезка выше, в сочетании с обратными значениями, то матрица преобразования представляет собой отображение сжатия :

Квадрат со сторонами, параллельными осям превращается в прямоугольник, который имеет такую ​​же площадь, как площадь. Взаимное растяжение и сжатие покинуть область инвариант.

вращение

Для поворота на угол & thetas по часовой стрелке относительно начала координат функциональной формы и . Написанный в матричной форме, это будет выглядеть так : Икс ‘ знак равно Икс соз ⁡ θ + Y грех ⁡ θ <\ Displaystyle х '= х \ соз \ тета + у \ грех \ Theta>Y ‘ знак равно — Икс грех ⁡ θ + Y соз ⁡ θ

Аналогичным образом , при повороте против часовой стрелки вокруг начала координат, функциональная форма и форма матрицы: Икс ‘ знак равно Икс соз ⁡ θ — Y грех ⁡ θ <\ Displaystyle х '= х \ соз \ тета -y \ грех \ Theta>Y ‘ знак равно Икс грех ⁡ θ + Y соз ⁡ θ

Эти формулы предполагают , что х точек оси вправо и у оси указывает вверх. В форматы , такие как SVG , где у оси указывает вниз, эти матрицы должны быть заменены.

сдвиг

Для сдвига отображения (визуально аналогично косым), есть две возможности.

Сдвиг параллельно х оси , имеет и . Написанный в матричной форме, это будет выглядеть так : Икс ‘ знак равно Икс + К Y <\ Displaystyle х '= х + ку>Y ‘ знак равно Y

Сдвиг параллельно у оси есть и , которая имеет форму матрицы: Икс ‘ знак равно Икс <\ Displaystyle х '= х>Y ‘ знак равно Y + К Икс

отражение

Для размышления о линии , которая проходит через начало координат, пусть будет вектор в направлении линии. Затем с помощью матрицы преобразования: L → знак равно ( L Икс , L Y ) <\ Displaystyle \ scriptstyle <\ VEC <л>> = (L_ <х>, )>

Ортогональные проекции

Для проецирования вектора ортогонален на линию , которая проходит через начало координат, пусть будет вектор в направлении линии. Затем с помощью матрицы преобразования: U → знак равно ( U Икс , U Y ) <\ Displaystyle <\ VEC <и>> = (и- <х>, и- <у>)>

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

Параллельные проекции также являются линейными преобразованиями и могут быть представлены просто в виде матрицы. Тем не менее, перспективные проекции не являются, и представлять их с матрицей, однородные координаты могут быть использованы.

Примеры в 3D компьютерной графики

вращение

Матрицу для поворота на угол θ вокруг оси , определяемой единичным вектором ( л , м , н ) является

отражение

Чтобы отразить точку через плоскость (которая проходит через начало координат), можно использовать , где это единичная матрица 3х3 и является трехмерный единичным вектором для вектора нормали к плоскости. Если норма L2 от и равен единице, матрица преобразования может быть выражена как: a Икс + б Y + с Z знак равно 0 <\ Displaystyle ах + с + CZ = 0>A знак равно я — 2 N N T <\ Displaystyle \ mathbf = \ mathbf <Я>-2 \ mathbf <НН>^ > я <\ Displaystyle \ mathbf > N <\ Displaystyle \ mathbf > a , б , <\ Displaystyle а, б,>с

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

Если 4 — й компонент вектора равен 0 , а не 1, то направление только вектор отражаются и его длина остается неизменной, как если бы это было зеркально через параллельные плоскости, проходящие через начало координат. Это полезное свойство , поскольку оно позволяет преобразование обоих позиционных векторов и нормальных векторов с той же матрицей. См однородных координат и аффинные преобразования ниже для дальнейшего объяснения.

Создание и инвертирующее преобразования

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

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

Если и B являются матрицами двух линейных преобразований, то эффект от применения первого , а затем B в строке вектора х определяется по формуле:

Другими словами, матрица комбинированного преобразования A с последующим B является просто произведением отдельных матриц.

Когда является обратимой матрицей существует матрица -1 , что представляет собой преобразование , которое « выполняет обратные» А поскольку его композиция с А представляет собой единичную матрицу . В некоторых практических приложениях, инверсии могут быть вычислены с использованием общих алгоритмов инверсии или путем выполнения обратной операции (которые имеют очевидную геометрическую интерпретацию, как и вращается в противоположном направлении) , а затем компонуют их в обратном порядке.

Другие виды преобразований

аффинные преобразования

Для представления аффинных преобразований с матрицами, мы можем использовать однородные координаты . Это означает , представляющие собой 2-вектор ( х , у ) в виде 3-вектора ( х , у , 1), а так же для более высоких измерений. С помощью этой системы, перевод может быть выражен с матричным умножением. Функциональная форма становится: Икс ‘ знак равно Икс + T Икс ; Y ‘ знак равно Y + T Y <\ Displaystyle х '= х + T_ <х>; у’ = у + T_ <у>>

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

С помощью матрицы преобразования , содержащей однородные координат, переводы стали линейно независимы , и , таким образом , могут быть легко перемешаны со всеми другими типами преобразований. Причина заключается в том, что реальная плоскости отображается в ш = 1 плоскость в реальном проективном пространстве, и поэтому перевод в реальном евклидове пространства может быть представлена в виде сдвига в реальном проективном пространстве. Хотя перевод является не- линейного преобразования в 2-D или 3-D евклидово пространства описывается декартовыми координатами (т.е. она не может быть объединена с другими преобразованиями при сохранении коммутативности и других свойств), он становится , в 3- D или 4-D проективного пространство описывается однородными координатами, простое линейное преобразование (а сдвиг ).

Другие преобразования аффинных могут быть получены с помощью композиции из двух или более аффинных преобразований. Например, дан перевод с вектором ротационного R на угол & thetas против часовой стрелки , масштабирование S с факторами и переводом T вектора результата М из T’RST является: ( T Икс ‘ , T Y ‘ ) , <\ Displaystyle (т '_ <х>, т’ _ <у>)> ( s Икс , s Y ) <\ Displaystyle (S_ <х>, S_ <у>)> ( T Икс , T Y ) , <\ Displaystyle (T_ <х>, T_ <у>),>

При использовании аффинных преобразований, однородная компонента координат вектора (обычно называемом ж ) никогда не может быть изменена. Таким образом, можно смело предположить , что это всегда 1 и игнорировать его. Однако это не так при использовании перспективных проекций.

перспективная проекция

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

Простейший проекция в перспективе использует происхождение в качестве центра проекции, а г = 1 в качестве плоскости изображения. Функциональная форма этого преобразования затем ; , Мы можем выразить это в однородных координатах , как: Икс ‘ знак равно Икс / Z <\ Displaystyle х '= х / г>Y ‘ знак равно Y / Z <\ Displaystyle у '= у / г>

Илон Маск рекомендует:  Поиск по сайту на PHP

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

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

CSS-трансформации. Матрица преобразований

За весьма короткую историю Интернета у разработчиков было несколько вариантов добавления анимации на свои сайты.

Начиная с 1987 году разработчики могли добавить анимацию с помощью GIF изображения. Это самая простая и примитивная анимация в рамках одного изображения.

Программы Adobe Flash позволяли создавать сложную анимацию, включая игры и веб-приложения. Однако эту технологию необходимо изучать, она не позволяет взаимодействовать с другим HTML кодом на странице (будь то заголовок или абзац) и часто является источником угрозы безопасности сайта (это одна из причин, почему Apple отказались от Flash на iOS).

JavaScript позволяет анимировать все элементы на странице, но ценой изучения этого языка программирования.

Консорциум W3C осознал потребность разработчиков в удобном нативном инструменте для создания анимаций на странице и в спецификации CSS3 представил три модуля, реализующие эту возможность: CSS Transforms, CSS Transitions и CSS Animations. Сегодня мы можем перемещать, масштабировать, вращать и наклонять любые HTML-элементы на странице на чистом CSS.

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

  • Перемещение
  • Масштабирование
  • Вращение
  • Наклон (перекашивание вдоль горизонтальной или вертикальной оси)

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

Основным CSS свойством получения перечисленных преобразований является transform . В качестве значения указывается тип и степень желаемого преобразования. Например, для увеличения элемента предоставляется ключевое слово scale , далее в скобках указывается коэфициент увеличения: transform: scale(2) ;

Показанное объявление приведет к увеличению элемента в два раза.

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

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

Рассмотрим подробнее все имеющиеся у нас в арсенале преобразования.

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

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

Вы можете заметить, что подобного эффекта можно добиться, используя абсолютное или относительное позиционирование, которое мы уже изучали. Вы будете правы. Однако, у перемещения с помощью transform есть свои преимущества — такие перемещения не вызывают лишних работ по отрисовке в браузере. Более подробно об этом в разделе [](Почему CSS предпочтительнее).

В функцию translate передается два аргумента. Первый определяет величину горизонтального, а второй — вертикального перемещения. В следующем примере щелчок по кнопке с классом .button вызовет смещение элемента на 10 пикселей вправо и 10 пикселей вниз.

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

Функция translate может перемещать элемент на указанное количество px, em или %. В качестве единиц измерения подойдут любые значения, указывающие длину в CSS. Следует обратить внимание, что значение перемещения, указанное в процентах, вычисляется от текущих размеров элемента. Зачастую, эта особенность используется для выравнивания элемента произвольных размеров по центру.

В CSS3 также имеются две дополнительные функции для горизонтального — translateX и вертикального перемещения — translateY .

Функция scale , действие которой мы уже наблюдали выше, позволяет увеличить или уменьшить элемент в размерах. Если мы хотим увеличить элемент в полтора или два раза, нам следует добавить следующие объявления:

Как уже упоминалось выше, увеличенный в размерах элемент не двигает другие элементы со своего пути. В действительности, он, скорее всего, перекроет соседние элементы (смотрите пример #2)

Пока что мы передавали в функцию scale один параметр — коэфициент масштабирования. Это число, на которое умножаются текущие размеры элемента. Передав число 1 мы никак не изменим элемент (масштабирование отсутствует). Передав 0.5 мы уменьшим элемент вдвове, а 4 — увеличим в четыре раза.

Таким образом числа между 0. 1 приводят к уменьшению элемента, а числа больше 1 — к увеличению. С помощью scale(0) можно, фактически, скрыть элемент на странице.


При изменении размеров элемента увеличивается или уменьшается как сам элемент, так и все его содержимое, включая текст, изображения, вложенные элементы.

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

Например, мы можем уменьшить элемент вдвое по ширине и увеличить вдвое по высоте. В таком случае нам потребуется следующее объявление:

в CSS3 имеются дополнительные функции для горизонтального и вертикального масштабирования — scaleX и scaleY соответственно.

Что будет, если применить к функции scale отрицательные значения? Мы получим интересный визуальный эффект поворота элемента вокруг его горизонтальной или вертикальной оси. Чтобы повернуть элемент вокруг обоих его осей, необходимо использовать объявление scale(-1) . scale(-1, 1) поворачивает элемент вокруг его вертикальной оси, а scale(1, -1) вокруг горизонтальной.

Функция rotate позволяет вращать элемент на указанное количество градусов. Чтобы задать значения угла используется число, за которым следует единица измерения deg . Чтобы повернуть элемент на 180 градусов, нам потребуется следующее объявление:

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

Помимо градусов ( deg , полный круг равен 360deg ), можно использовать другие единицы измерения: grad (полный круг 400grad ), rad (полный круг 6.2832rad ) и turn (равен одному повороту).

В CSS3 есть дополнительные функции для вращения элемента относительно осей X и Y: rotateX() и rotateY() . С помощью них можно создавать эффекты флип-вращения: http://codepen.io/mrsamo/full/xwmZdz/

Наклон элемента можно выполнить по горизонтальной и вертикальной осям. Чтобы наклонить все вертикальные линии элемента на 45 градусов влево (против часовой стрелки) нам потребуется следующее объявление:

Для наклона всех горизонтальных линий на 45 градусов по часовой стрелке нам потребуется объявление:

Мы также можем наклонить элемент по двум осям одновременно. Применим наклон на 25 градусов для вертикальных и горизонтальной линий с помощью объявления:

Как и в случае с translate и scale , в CSS3 предлагаются отдельные функции для осей X и Y: skewX и skewY .

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

Следующее объявление применит все 4 вида преобразования к элементу:

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

Для примера выше справедливо: translateX(100px) преместит элемент вниз, а не право и сработает, фактически, как translateY(100px) для первоначального элемента, к которому не применялось вращение. Для лучшего понимания работы преобразований после изменения системы координат рассмотрим следующее объявление:

Пошагово покажем, как ведет себя элемент и система координат после каждого преобразования. Элемент до преобразования:

В первую очередь браузер займется вращением элемента на 45 градусов по часовой стрелке.

После вращения будет повернута и система координат и наклон будет выполнен уже на новой системе.

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

Если мы применим свойства в другом порядке, то получим совершенно иную картину.

Будьте внимательны при использовании множественных преобразований.

Все преобразования браузер выполняет относительно точки, которая по умолчанию находится в центре элемента. Однако, эту точку можно двигать с помощью свойства transform-origin . Это свойство работает так же, как и свойство background-position . В качестве значения принимает ключевые слова, абсолютные или относительные единицы измерения (em, %).

Давайте повернем элемент относительно его левой верхней точки, используя объявление:

Чтобы повернуть элемент относительно центральной нижней точки, используем объявление:

Как вы уже заметили, мы передаваем два аргумента через пробел: первое значение отвечает за горизонтальную, а второе — за вертикальную позицию.

Свойство transform-origin не влияет на элементы, которые подвергаются только перемещению с помощью функции translate .

Пока что мы рассматривали преобразования, которые применялись в двумерном пространстве — системе координат XY. В CSS3 есть возможность имитировать трехмерное пространство на плоском экране монитора, используя трехмерные преобразования ( 3D transform ).

Модель 3D трансформаций CSS3 является логическим продолжением модели 2D трансформаций, но с одним важным дополнением — наличием перспективы. Перспектива создает иллюзию глубины и позволяет перемещать в двумерном пространстве экрана точку вдоль и вокруг оси Z (как бы вглубь экрана и из него).

Если вы занимались рисованием, то, возможно, слышали о перспективе. Перспектива позволяет создать иллюзию трехмерного пространства, когда у вас в наличие только двумерное. Сначала вы берете точку в плоскости, которая называется «точкой схождения линий». Далее вы рисуете линии от этой точки до краев вашей плоскости. В дальнейшем эти линии определят относительный размер всех объектов, которые вы планируете нарисовать, создавая у смотрящего иллюзию глубины и расстояния до объекта.

3D преобразования работают похожим образом. В качестве плоскости у нас система координат, и тогда точкой схождения линий будет точка на этой системе, а точнее точка (0,0,0), где все значения на осях X, Y и Z равны 0.

Мы можем управлять расстоянием от точки просмотра до трансформируемого элемента. Для это есть свойство perspective . Уменьшая значение перспективы, мы добавляем глубину элементу (увеличиваем его размеры по оси Z). Сам элемент при этом становится визуально меньше. Чем меньше значение, тем ближе Z-пространство к зрителю и тем больше эффект, заданный с помощью свойства transform . Свойство perspective действует только на дочерние элементы, сам элемент не получает «перспективный» вид. Если единица измерения не указана, по умолчанию она считается в px.

Возможно, все это звучит сложно, но на деле это не так.

Помимо удаленности, мы можем изменять расположение точки обзора. Для этого в CSS3 имеется свойство perspective-origin . Свойство работает только с заданным свойством perspective , отличным от нуля. Аналогично background-position и transform-origin в качестве значения принимаются ключевые слова, абсолютные или относительные единицы измерения (em, %).

Во всех следующих примерах значение перспективы равно 400.

По умолчанию все трехмерные преобразования работают в двумерной системе координат (X и Y) и не имеют глубины (Z). Для имитации глубины необходимо явно изменить это поведение. Сделать это можно с помощью свойства transform-style , выставив ему значение preserve-3d . По умолчанию установлено второе допустимое значение — flat .

Реализуем три элемента: первый выдвинем по оси Z на нас (из экрана), второй оставим в плоскости экрана, а третий отодвинем от нас (в глубь экрана). Родительский элемент также немного повернем. Если оставить значение по умолчанию, то мы не увидим глубины картины. В отличие от этого, значение preserve-3d создаст псевдо-глубину.

Также стоит упомянуть о свойстве backface-visibility , которое контролирует видимость задней части элемента, когда он повернут. Значение hidden отменяет видимость по умолчанию и скрывает обратную сторону преобразованного элемента.

Все функции преобразования, кроме наклона, имеют аналоги в 3D трансформациях: translate3d(x,y,z) , translateZ(z) , scale3d(x,y,z) , scaleZ(z) , rotate3d(x,y,z,угол) , rotateZ(угол) .

Помимо четырех функций преобразования: translate , scale , rotate и skew CSS3 позволяет самостоятельно описать трансформацию с помощью матрицы преобразования. В данном случае имеется ограничение — все линии остаются параллельными, таким образом нельзя описать перспективу с помощью матрицы.

Матрицы имеет размер 3х3.

Иногда третью колонку опускают, так как она не влияет на конечный результат.

Чтобы рассчитать новые координаты элемента после применения матрицы трансформации, браузер использует следующие формулы:

Роль каждого коэфициента описана в таблице ниже.

Коэффициент Преобразование Аналог
a Изменение размера по горизонтали scaleX()
b Наклон по горизонтали skewX()
c Наклон по вертикали skewY()
d Изменение размера по вертикали scaleY()
tx Смещение по горизонтали в пикселах translateX()
ty Смещение по вертикали в пикселах translateY()

Матрица задается с помощью ключевого слова matrix свойства transform . В функцию matrix передаются аргументы — коэфициенты матрицы преобразования.

Порядок перечисления коэфициентов имеет принципиальное значение.

Давайте воспроизведем функцию scaleX(2) с помощью матрицы преобразования. Для увеличения элемента по горизонтали в два раза, коэфициент a приравниваем к 2, а остальные коэфициенты делаем как в единичной матрице (матрица с нулевыми коэфициентами и единицами по диагонали).

Вычисляем по формулам новые координаты элемента:

Координата x элемента после преобразования в два раза больше оригинальной, чего мы и добивались.

Для описания 3D преобразований используется матрица 4х4 и ключевое слово matrix3d свойства transform . Подробнее об этом вы можете прочитать тут — https://dev.opera.com/articles/ru/understanding-the-css-transforms-matrix/.

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

Переход — это анимация от одного набора CSS свойств к другому. Для работы перехода необходимо:

  1. Два набора свойств. Первый набор описывает начальное состояние элемента (например, color: red ), а второй — конечное ( color: blue ). Процессом анимации от одного набора к другому (переход цвета от красного до синего) занимается браузер.
  2. Свойство transition. Краеугольный камень перехода — описание свойств и характеристик анимации перехода. Как правило, применяется к исходному набору свойств.
  3. Инициатор. Действие, которое вызывает изменение от одного набора свойств к другому. Часто в качестве инициатора используются псевдоклассы :hover , :target , :focus , :active . Например, с помощью :hover можно анимировать изменение внешнего вида элемента от первоначального появления на странице до проведения над элементом указателя мыши. Конечно, в качестве инициатора может выступать JavaScript: применение инлайновых стилей к элементу или добавление класса с новым набором CSS свойств. После пропадания иницатора (пользователь увел указатель мыши с элемента) браузер возвращает внешний вид элемента к первоначальному и анимирует этот процесс.

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

Браузер не может анимировать переходы для всех CSS свойств, но в нашем арсенале есть линый список свойств, с которыми переходы работают:

  • все преобразования: translate , rotate , scale , skew )
  • color , background-color , border-color
  • width , height , border-width , margin , padding
  • font-size , line-height , letter-spacing , word-spacing
  • top , right , bottom , left
  • opacity

В основе CSS перехода лежат 4 свойства:

Свойство Отвечает за
transition-property Какие свойства анимировать
transition-duration Сколько времени длится анимация
transition-timing-function Какой тип анимации будет использован
transition-delay Необязательная задержка в начале анимации

Рассмотрим все свойства, связанные с созданием перехода на примере кнопки, которая становится чуть заметнее на фоне остальных во время прохода указателя мыши над ней. На псевдокласс :hover мы будем увеличивать размер кнопки с помощью уже известного свойства transform: scale .

Переход одного свойства ⇡

Начнем с задания двух наборов свойств — для первоначального вида кнопки и вида при проходе над кнопкой указателем мыши.

Эти стили работают мгновенно, кнопка увеличивается в 1.2 раза моментально при проходе курсора мышки над кнопкой.

Чтобы масштаб изменился плавно и анимация изменения длилась половину секунды, нужно к стилю кнопки добавить два новых свойства:

В transition-property мы указали анимируемое свойство, а в transition-duration — время, в течение которого будет осуществляться анимация.

Переход нескольких свойств ⇡

В качестве значения для transition-property можно указывать не конкретное анимируемое свойство, а:

  • ключевое слово all (в таком случае будут анимироваться все изменяемые CSS войства)
  • список анимируемых свойств через запятую ( transition: width, height, . )

Свойство transition-duration принимает значение в секундах или миллисекундах ( transition-duration: .5s эквивалетно transition-duration: 500ms ). Если в transition-property указано несколько CSS свойств, в transition-duration есть возможность задать продолжительность анимации для каждого свойства отдельно. Для этого надо перечислить значения через запятую. Порядок перечисления продолжительности анимации совпадает с порядком следования анимируемых свойств.

Добавим изменение цвета фона для нашей кнопки с той же продолжительностью, что и масштаб.

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

Теперь при проходе указателя мыши над кнопко сначала плавно увеличивается масштаб кнопки, а после окончания этой анимации плавно изменяется цвет фона. Аналогично transition-duration , для каждого свойства можно указать свое время задержки. Порядок перечисления показателей времени задержки должен соответствовать порядку перечисления этих свойств в transition-property .

И последнее свойство, описывающее CSS переход — это transition-timing-function . Это свойство описывает скорость хода анимации. В его предназначении легко запутаться: в отличие от transition-duration , которое управляет продолжительностью анимации, transition-timing-function описывает, как быстро по времени меняется указанное через transition-property значение свойства. Например, мы можем начать изменение свойства быстро в начале и медленно в конце, или наоборот.

В качестве значений для данного свойства есть 8 ключевых слов: linear , ease , ease-in , ease-out , ease-in-out , step-start , step-end и step . По умолчанию используется метод ease , при котором анимация начинается медленно, ускоряется к середине и снова змедляется в конце. Используя разные методы можно варьировать общий вид анимации. По ссылке вы можете посмотреть одну и ту же анимацию, которая совершается с разным ходом.

Значение Ход анимации
ease Медленное начало, ускорение к середине и замедление к завершению
ease-in Медленное начало, ускорение к завершению
ease-out Быстрое начало, замедление к завершению
ease-in-out Медленное начало и завершение
linear Непрерывная одинаковая скорость от начала до конца
step-start Моментальный переход к конечным значениям (анимации нет)
step-end Сохранение начальных значений заданное время, затем моментальный переход к конечным значениям (анимаиции нет)
steps Ступенчатая функция, steps( , start | end), изменение свойств скачками за указанное число шагов
cubic-bezier Функция движения в виде кривой Безье (читайте дальше)

Давайте изменим стандартный метод ease для нашей чудо-кнопки на ease-in , чтобы наши анимации начинались медленно и ускорялись к завершению.

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

Помимо ключевых слов, свойство transition-timing может принимать кубическую кривую Безье. Эта кривая описывает график хода анимации по времени. Кривизной линии можно управлять путем настройки двух контрольных точек: чем круче линия, тем быстрее анимация, а более пологая линия означает более медленный ход анимации. Для создания и тестирования различных функций распределения скорости хода анимации можно воспользоваться прекрасным инструментом от Мэтью Лейнома — Ceasar.


На самом деле, все ключевые слова ( linear , ease , ease-in , ease-out и ease-in-out ) — это частные и наиболее популярные кривые. Например, метод ease-in можно задать и с помощью кубической кривой Безье:

С помощью кривых Безье вы можете добиться крайне интересных эффектов в ваших анимациях. Более подробно о временных функциях можно узнать в статье: CSS 3 Timing Functions и с чем их едят.

Думаю, вы обратили внимание, как раздулся наш CSS код под конец предыдущей части. Указание всех 4х свойств, описывающих переход, занимает достаточно много места. К счастью, мы можем использовать лишь одно свойство transition для описания перехода. Это свойство объединяет все вышеперечисленные в одно. Для этого нужно перечислить через пробел:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

Например, следующие объявления эквиваленты, но второе имеет гораздо меньший объем и более высокую читабельность.

Обязательными считаются анимируемое свойство (или ключевое слово all ) и продолжительность анимации, а задержку и функцию распределения скорости по времени можно опустить. По умолчанию задержка равна нулю (отсутвтует), а функция распределения — ease . Следующее объявление включит анимацию изменения всех свойств в течение одной секунды.

А вот пример перехода только цвета фона:

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

В краткой записи это будет выглядеть так:

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

В отличие от переходов, анимация не требует наличия инициатора. Можно запустить анимацию сразу при загрузке страницы и тем самым, например, привлечь внимание к какому-либо элементу.

Для создания анимации необходимо:

  1. Определить ключевые кадры. Ключевой кадр — это отдельный кадр анимации, определяющий внешний вид сцены. Например, в качестве первого кадра можно указать зеленый цвет фона для элемента, а второго — синий. После этого браузер создаст анимацию перехода цвета фона от зеленого к синему (от первого кадра ко второму). В переходы заложен тот же механизм. Однако, если в переходах мы могли задать «два кадра» анимации (внешний вид до и после применения инициатора), то в механизме анимации можно определять множество ключевых кадров. Например, переход от зеленого цвета фона к синему, потом к желтому и в конце — к красному.
  2. Применение анимации к элементу. После определения ключевых кадров, можно назначать созданную анимацию любому количеству элементов на странице. При этом продолжительность, задержка и другие свойства анимации могут варьироваться от элемента к элементу.

Рассмотрим механизм создания ключевых кадров на примере появления попап-окна.

Ключевые кадры создаются с помощью правила @keyframes , за которым следует наименование анимации. Это имя затем используется для применения анимации к элементам. Хорошим тоном считается называть анимацию осмысленно (например, fadeIn/fadeOut).

Ключевое слово @keyframes подобно конструкциям @import и @media не является CSS свойством, а считается, так называемым, правилом.

Пример задания анимации:

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

Как мы видим, каждый ключевой кадр, фактически, это простой набор CSS свойств, описывающий внешний вид элемента.

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

Два ключевых кадра ⇡

Создадим анимацию перехода от абсолютной прозрачности к абсолютной непрозрачности.

После создания анимация готова к применению. Ее можно добавить к любому стилю любого элемента на странице. Если просто добавить анимацию к элементу, то она запустится при загрузке страницы. Можно привязать анимацию в какому-либо действию, добавив ее к одному из псевдоклассов: :hover , :active , :target или :focus .

В CSS3 имеется несколько свойств, позволяющих управлять способом и временем проигрывания анимации. Для работы анимации как минимум, необходимо указать имя (которое задается в правиле @keyframes ) и продолжительность анимации.

В нашем случае после клика на кнопку, элементу с попап-окном добавляется класс b-popup_show . Для проигрывания анимации классу b-popup_show необходимо указать следующие CSS свойства:

Свойство animation-name сообщает браузеру, какую анимацию нужно применить. Здесь указывается то самое имя, которое использовалось при создании анимации.

Свойство animation-duration устанавливает время анимации (в секундах или миллисекундах).

Мы видим, что анимация задается в одном месте (в правиле @keyframes ), а применяется в другом (в стиле элемента). Благодаря этому мы можем применять одну и ту же анимацию для разных элементов, меняя параметры (продолжительность и др.). Таким образом, созданная нами анимация show может применяться для отображения других элементов на странице.

Мы не ограничены указанием одной анимацией для нашего попапа. Допустим у нас есть вторая анимация моргания фонового цвета элемента с синего на зеленый:

Чтобы применить к элементу более одной анимации, нужно указать: список имен с запятой в качестве разделителя и список времен длительности через запятую.

Как и в случае с переходами, порядок применения параметров времени совпадает с порядком перечисления имен анимаций. В данном случае к попап-окну применится анимация появления длительностью 1 секунда и анимация моргания цвета фона, длительностью 3 секунды.

Больше двух ключевых кадров ⇡

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

Теперь в середине анимации цвет фона станет красным. Ключевые слова from и to являются синонимами для процентных значений 0% и 100%. Мы можем добавить сколь угодно много ключевых кадров:

Допустим, анимация, указанная выше, длится 10 секунд. Тогда на 0-ой секунде выставится синий цвет фона. Затем в течение 2.5 секунд цвет фона будет плавно меняться с синего до зеленого и в отметке 2.5 секунды станет зеленым. Затем до 5 секунд будет происходить плавная смена цвета до красного, потом до 7.5 секунд до желтого и последние 2.5 секунды цвет фона будет меняться с желтого до серого. В конце анимации, на 10 секунде, цвет фона станет серым.

Мождно усложнить использование процентных значений, добавив несколько таких значений к одному набору CSS свойств.

Таким образом, фоновый цвет попапа будет синим на 0-ой и 5-ой секунде, зеленым на 2.5 и 7.5 секундах и станет серым в конце анимации на 10-ой секунде. С помощью такого трюка можно притормозить смену какого-то свойства, сделав паузу в анимации:

В таком случае с 25% до 75% от всего времени анимации цвет фона будет оставаться зеленым. На 25% хода анимации цвет фона станет зеленым, затем от отметки 25% до 75% будет оставаться зеленым, и с 75% начнем меняться на серый, пока не станет чисто серым к 100%.

Пока что все рассмотренные примеры включали мзенение только одного CSS свойства. Естественно, никто не ограничивает в анимации сразу нескольких свойств.

Аналогично transition-delay свойство animation-delay задает возможное время ожидания перед воспроизведением анимации. По умолчанию анимация выполняются сразу, как только она применяется к элементу. Допустимо указывать задержку в секундах и миллисекундах.

Как и в случае с переходами, можно указывать функцию распределения скорости анимации по времени. Свойство animation-timing-function принимает 5 ключевых слов: linear , ease , ease-in , ease-out , ease-in-out или функцию Безье. Все это работает точно так же, как в рассмотренном случае с переходами.

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

Предположим, что мы реализуем анимацию цвета фона с тремя ключевыми кадрами. Мы хотим замедлить превращение первого цвета во второй с помощью функции ease-in , а затем равномерно продолжить анимацию от середины до ее окончания. Это можно сделать добавлением двух функций распределения скорости по времени для первого ключевого кадра (она будет управлять анимацией от 0% до 50%) и второго (для управления анимацией от 50% до 100%).

В переходах мы работали с одкократным изменением свойств элемента (например, на :hover ). В анимациях благодаря свойству animation-iteration-count можно проигрывать анимацию один, два и более раз. Допустим, мы имеем анимацию масштаба элемента от единицы до двух и хотим повторить анимацию 10 раз.

В качестве значения свойства animation-iteration-count может выступать ключевое слово infinite , которое запускает анимацию бесконечное количество раз.

Скачки между повторениями ⇡

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

В отличие от переходов, где «из коробки» после пропадания инициатора браузер воспроизводил анимацию в обратном направлении, в CSS3 анимациях нам необходимо указать свойство animation-direction , равное alternate . В таком случае браузер будет вопроизводить нечетные итерации в прямом направлении, а четные — в обратном.

Как мы видим, пропал эффект резкого перехода между последним и первым ключевым кадром. Если вам необходимо выполнить анимацию несколько раз и вернуться к его первоначальному виду, используйте четное количество итераций и не забывайте устанавливать animation-direction: alternate .

Скачки после завершения ⇡

Следующий, режущий глаз, эффект возникает в момент завершения всех повторений анимации (если только свойство animation-iteration-count не равно infinite ). По завершению, браузер отобразит элемент в его первоначальном виде. В примере с анимацией масштаба от единицы до двух установим количество повторений, равное трем.

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

Мы можем заставить браузер сохранять внешний вид элемента, который он приобретает по завершении анимации. Для этого в CSS3 есть свойство animation-fill-mode , которому следует выставить значение forwards .

Теперь по окончании трех повторений, элемент сохранил масштаб, равный двум.

CSS3 анимации предлагают множество свойств по управлению анимациями. К счастью имеется свойство animation , в котором сочетаются такие свойства, как:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-delay
  • animation-fill-mode

Таким образом, следующие объявления полностью эквиваленты.

Экономия в 6 строчек! Значения свойств перечисляются в указанном выше порядке. Среди обязательных свойств являются только продолжительность и время анимации.

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

Как уже упоминалось выше, CSS3 анимации имеют механизм остановки и возобновления анимации. Для этих целей предлагается свойство animation-play-state , которое принимает одно из двух значений: running или paused .

Допустим, у нас имеется анимация пульсирующего сердца и мы хотим остановить пульсацию при проходе указателя мыши над элементом.

При наведении указателя мыши на сердце анимация замирает. Если указатель убрать — свойство animation-play-state примет значение по умолчанию running и анимация продолжится. При создании сложных анимаций можно добавить кнопку «Пауза» и останавливать анимацию по требованию пользователя.

Использование в жизни ⇡

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

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

То есть уже сейчас вы можете писать свободный от префиксов код и наслаждаться работающими анимациями во всех браузерах. Это здорово! )

Почему CSS предпочтительнее? ⇡

Анимации на CSS просты, декларативны, задействуют аппаратное ускорение на видеокарте, за счет чего выигрывают в производительности. Подробнее о плюсах CSS анимаций в докладе Постигаем дзен анимации.

Матрица преобразования

Будем рассматривать двумерный случай.

Матрица преобразования — это некоторая матрица [math] 3 \times 3 [/math] . Мы будем рассматривать матрицы вида [math] \left(\begin a & b & t_x\\ c & d & t_y\\ 0 & 0 & 1 \end\right) [/math]

Допустим есть какое-то преобразование [math] F [/math] , и [math] F(P) = P’ [/math] (к точке [math] P [/math] применили преобразование [math] F [/math] и получили точку [math] P’ [/math] ).

Тогда матрица преобразования [math] F [/math] , умноженная на однородные координаты [math] P [/math] , даёт однородные координаты [math] P’ [/math] .

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

Посмотрим как меняются координаты при преобразовании.

[math] F \left(\begin x\\ y\\ 1 \end\right) = [/math] [math] \left(\begin a & b & t_x\\ c & d & t_y\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin x\\ y\\ 1 \end\right) = [/math] [math] \left(\begin a x + b y + t_x\\ c x + d y + t_y\\ 1 \end\right) [/math] .

То есть новые координаты как-то линейно зависят от старых.

Рассмотрим частные случаи преобразований.

Содержание


Базовые преобразования [ править ]

Параллельный перенос [ править ]

Задаёт преобразование [math] x \rightarrow x + t_x ,\ y \rightarrow y + t_y [/math] .

Обозначается [math] T_ <\overrightarrow v>[/math] , где [math] \overrightarrow v = (t_x, t_y) [/math] — вектор параллельного переноса.

[math] T_ <(t_x, t_y)>= \left(\begin 1 & 0 & t_x\\ 0 & 1 & t_y\\ 0 & 0 & 1 \end\right) [/math]

Пример Задача: Найдите новые координаты точки [math] (6, 9) [/math] после параллельного переноса плоскости на вектор [math] \overrightarrow v = (1, 2) [/math] .

Решение: [math] T_ <(a, b)>(\left(\begin 6\\ 9\\ 1 \end\right)) = [/math] [math] \left(\begin 1 & 0 & 1\\ 0 & 1 & 2\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 6\\ 9\\ 1 \end\right) = [/math] [math] \left(\begin 6 + 1\\ 9 + 2\\ 1 \end\right) = [/math] [math] \left(\begin 7\\ 11\\ 1 \end\right) [/math]

Вполне ожидаемый ответ.

Масштабирование вдоль осей [ править ]

Задаёт преобразование [math] x \rightarrow s_x x ,\ y \rightarrow s_y y [/math] .

Будем обозначать как [math] S_ [/math] . Числа [math] s_x [/math] и [math] s_y [/math] называются коэффициентами масштабирования.

[math] S_ = \left(\begin s_x & 0 & 0\\ 0 & s_y & 0\\ 0 & 0 & 1 \end\right) [/math]

Задача: Найдите новые координаты точки [math] (3, 5) [/math] после масштабирования по оси [math] O_x [/math] с коэффициентом 2 (по оси [math] O_y [/math] масштаб остаётся таким же).

Решение: [math] S_ <2, 1>(\left(\begin 3\\ 5\\ 1 \end\right)) = [/math] [math] \left(\begin 2 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 3\\ 5\\ 1 \end\right) = [/math] [math] \left(\begin 2 \cdot 3\\ 1 \cdot 5\\ 1 \end\right) = [/math] [math] \left(\begin 6\\ 5\\ 1 \end\right) [/math]

Поворот относительно начала координат [ править ]

Обозначается [math] R^\alpha [/math] , где [math] \alpha [/math] — угол поворота. Как обычно, [math] \alpha \gt 0 [/math] при повороте против часовой стрелки, и [math] \alpha \lt 0 [/math] при повороте по часовой стрелке.

[math] R^\alpha = \left(\begin \cos \alpha & — \sin \alpha & 0\\ \sin \alpha & \cos \alpha & 0\\ 0 & 0 & 1 \end\right) [/math]

Пример Задача: Найдите новые координаты точки [math] (5, 1) [/math] после поворота плоскости на [math] 90 [/math] °.

Решение: [math] R^ <90>= \left(\begin 0 & -1 & 0\\ 1 & 0 & 0\\ 0 & 0 & 1 \end\right) [/math]

[math] R^ <90>(\left(\begin 5\\ 1\\ 1 \end\right)) = [/math] [math]\left(\begin 0 & -1 & 0\\ 1 & 0 & 0\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 5\\ 1\\ 1 \end\right) = [/math] [math] \left(\begin -1\\ 5\\ 1 \end\right) [/math]

[math] R^ <180>= \left(\begin -1 & 0 & 0\\ 0 & -1 & 0\\ 0 & 0 & 1 \end\right) [/math] , то есть центральная симметрия относительно начала координат меняет координаты точки на противоположные.

Тождественное преобразование [ править ]

Это преобразование, оставляющее все точки неподвижными.

Его матрица: [math] I = \left(\begin 1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1 \end\right) [/math]

Композиция преобразований [ править ]

[math] (g \circ f) x = g (f (x)) [/math]

Задача: к точке [math] (3, 5) [/math] применили осевую симметрию относительно [math] O_x [/math] , и затем применили параллельный перенос на [math] \overrightarrow <(2, 1)>[/math] . Какие новые координаты у точки?

Решение: обозначим нашу точку за [math] P [/math] , новую точку за [math] P’ [/math]

Посчитаем двумя способами.

1) [math] P’ = S_<1, -1>(T_<\overrightarrow<(3, 2)>>(P)) = \left(\begin 1 & 0 & 2\\ 0 & 1 & 1\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] (\left(\begin 1 & 0 & 0\\ 0 & -1 & 0\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 3\\ 5\\ 1 \end\right)) = [/math] [math] \left(\begin 1 & 0 & 2\\ 0 & 1 & 1\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 3\\ -5\\ 1 \end\right) = [/math] [math] \left(\begin 5\\ -4\\ 1 \end\right) [/math]

2) Воспользуемся ассоциативностью умножения матриц (сочетательный закон)

[math] P’ = S_<1, -1>(T_<\overrightarrow<(3, 2)>>(P)) = \left(\begin 1 & 0 & 2\\ 0 & 1 & 1\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] (\left(\begin 1 & 0 & 0\\ 0 & -1 & 0\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 3\\ 5\\ 1 \end\right)) = [/math] [math] (\left(\begin 1 & 0 & 2\\ 0 & 1 & 1\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 1 & 0 & 0\\ 0 & -1 & 0\\ 0 & 0 & 1 \end\right)) \cdot [/math] [math] \left(\begin 3\\ 5\\ 1 \end\right) = [/math] [math] \left(\begin 1 & 0 & 2\\ 0 & -1 & 1\\ 0 & 0 & 1 \end\right) \cdot [/math] [math] \left(\begin 3\\ 5\\ 1 \end\right) = [/math] [math] \left(\begin 5\\ -4\\ 1 \end\right) [/math]

Заметим, что [math] \left(\begin 1 & 0 & 2\\ 0 & -1 & 1\\ 0 & 0 & 1 \end\right) [/math] — тоже какая-то матрица преобразования, в данном случае «осевая симметрия относительно [math] O_x [/math] , с последующим параллельным переносом на [math] \overrightarrow <(2, 1)>[/math] «

Тогда матрица для [math] (S_ <1, -1>\circ T_<\overrightarrow<(2, 1)>>) [/math] будет [math] \left(\begin 1 & 0 & 2\\ 0 & -1 & 1\\ 0 & 0 & 1 \end\right) [/math] .

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

Свойство CSS transform

Свойство CSS transform (от слова «трансформация») позволяет видоизменять элемент на html-страницах. Например, можно

  • вращать
  • смещать
  • изменять масштаб
  • наклонять
  • комбинировать выше описанные действия

Благодаря этому свойству можно создавать интересные эффекты без применения JavaScript, что позволяет ускорять работу браузера. Важно так же отметить, что есть возможность кобминировать эффект с временными задержками.

1. Синтаксис CSS transform

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

Примечание про браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

  • -ms-transform — для IE9 и старше (младше девятой версии трансформация не поддерживается
  • -webkit-transform — для Chrome, Safari, Andro >-o-transform — для Opera до версии 12.10
  • -moz-transform — для Firefox до версии 16.0

2. transform:rotate(x) — вращение объекта

Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

На странице преобразуется в следующее

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

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) — смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках — смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

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

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) — смещение по Х, translateY(y) — смещение У.

4. transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

5. transform:skew — наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках — наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) — наклон по Х, skewY(y) — наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование ( scale ), вращение ( rotate ) и перемещения ( translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

  • none — отсутствие преобразований (по умолчанию включено оно);
  • matrix(x,x,x,x,x,x) — преобразование 2D с помощью матрицы из 6 значений;
  • matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) — преобразование 3D с помощью матрицы из 16 значений;
  • translate3d(x,y,z) — перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
  • scale3d(x,y,z) — масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
  • rotate3d(x,y,z) — вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
  • rotateX(x) — 3d вращение по оси X;
  • rotateY(x) — 3d вращение по оси Y;
  • rotateZ(x) — 3d вращение по оси Z;
  • perspective(n) — перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

Возможно, вы зададите вопрос «а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?» Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

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