Плавная анимация перемещения с помощью CSS. Перемещения и трансформации в CSS3

Перевод

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

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат , так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем - горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

object: Установление главных правил нашего объекта.
van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.object { position: absolute; } .van { top: 45%; left: 44%; }
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0); . Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

#axis:hover .move-right{ transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ }
Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.

Object { position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ }
Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

linear : перемещение происходит постоянной скоростью от начала и до конца.
ease : перемещение начинается медленно и затем набирает скорость.
ease-in : перемещение начинается медленно.
ease-out : перемещение заканчивается медленно.
ease-in-out : перемещение начинается и заканчивается медленно.
cubic-bezier : ручное определение значения перемещения.

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ , в то время как Y остается неизменным. В нашем случае мы переместим объект на -350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); - переместим объект влево.
#axis:hover .move-left { transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ }
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.

2: Вертикальное перемещение

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

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket { top: 43%; left: 44%; }
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

#axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS
#axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y . Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS
#axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg) ; где n - градусы.

Вращение по часовой стрелке

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

HTML

CSS
#axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }

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

Масштабирование - это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y) , мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X - ширина, а Y - высота.
Давайте посмотрим на следующий пример.

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

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

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

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

transform : трансформация1 [трансформация2 ];

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

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

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

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

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

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

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

Примечание

Свойства:

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

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

Пример #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 доступно по следующим свойствам:

object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""

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

Перевод

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

1: Горизонтальное перемещение

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

object: Установление главных правил нашего объекта.
van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
move-right: Используя этот класс, мы будем двигать наш объект.

linear : перемещение происходит постоянной скоростью от начала и до конца.
ease : перемещение начинается медленно и затем набирает скорость.
ease-in : перемещение начинается медленно.
ease-out : перемещение заканчивается медленно.
ease-in-out : перемещение начинается и заканчивается медленно.
cubic-bezier : ручное определение значения перемещения.

Двигаемся влево

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

2: Вертикальное перемещение

Двигаемся вверх

#axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }

Двигаемся вниз

HTML

CSS
#axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }

3: Диагональное перемещение

HTML

CSS
#axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }

4: Вращение

Вращение по часовой стрелке

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

HTML

CSS
#axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }

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

Свойство CSS transform позволяет визуально преобразовать элемент в двухмерном или трехмерном пространстве. С помощью преобразования элементы могут быть перемещены, повернуты и масштабированы в двух или трехмерном пространстве.

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

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

Матрица преобразования также зависит от значения свойства transform-origin , которое используется для указания исходного положения преобразования.

Система координат

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

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

Исходная система координат и система координат при применении transform со значением свойства transform-origin, применяемым по умолчанию

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

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

Если нужно переместить элемент с помощью CSS text transform в другое положение и повернуть его в новом положении, вы должны сделать это в указанном порядке: переместить, а затем повернуть. Если вы повернете элемент, то повернется его система координат, и перемещение в определенном направлении не приведет к ожидаемому результату.

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

Примечания

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

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

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

Когда элемент преобразуется, значение fixed для свойства background-attachment рассматривается, как значение scroll . Вычисленное значение background-attachment не претерпевает изменений.

Кроме transform-origin при преобразовании могут использоваться свойства perspective и perspective-origin , чтобы задать для сцены глубину, а свойство transform-style — чтобы сохранить определение трехмерного пространства. Это полезно при выполнении вложенных CSS-преобразований . Все эти свойства используются в сочетании друг с другом для создания CSS-преобразования в двух или трех измерениях.

Официальный синтаксис

Синтаксис:

transform: none | <список преобразований>

Исходное значение: none
Применяется к: трансформируемому элементу
Анимируемо: да

Примечания

<список преобразований> — это список из функций преобразования.

Значения

Можно применить к элементу преобразование, используя одно из следующих значений свойства transform :

CSS transform rotate ()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
skewX
skewY
matrix()
translateZ
translate3d()
scaleZ()
scale3d()
rotateX()
rotateY()
rotateZ()
rotate3d()
matrix3d()
perspective()

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

Функции 2D-преобразований:

translate()

transform: translate(tx [, ty ]?); /* Знак вопроса указывает второе значение, которое является необязательным * /

Функция CSS transform translate используется для перемещения элемента по вектору , где tx — смещение по оси х , а ty — смещение по оси у . Если ty не указано, то его значение считается равным нулю, а элемент перемещается только вдоль оси х . Если единицы измерения не указаны, число будет рассматриваться как «пользовательские единицы «.

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

Примеры:

transform: translate(100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(-100px); /* перемещает элемент на 100 пикселей по оси x */ transform: translate(50px, 300px); /* перемещает элемент на 50 пикселей вправо и на 300 пикселей вниз */ transform: translate(50%, 10%); /* перемещает элемент на 50% его ширины влево, и на 10% его высоты вниз */ transform: translate(-100%); /* перемещает элемент на -100% влево */ transform: translate(100px, 100px); /* результат приведен на рисунке ниже */

Результат применения к элементу смещения:

Результат применения к элементу преобразования translate(100px, 100px). Обратите внимание на преобразованную позицию начала координат.

translateX()

transform: translateX(tx);

Функция CSS transform translateX() используется, чтобы переместить элемент на заданное расстояние вдоль оси х . Значение tx задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться как «пользовательские единицы «.

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

Примеры:

transform: translateX(300px); transform: translateX(-50%); transform: translateX(150%);

translateY()

transform: translateY(ty);

Функция translateY() используется для перемещения элемента на заданное расстояние вдоль оси Y . Значение ty задается в единицах длины или процентах. Если единицы измерения не указаны, число будет рассматриваться, как «пользовательские единицы «.

Положительное значение смещения перемещает элемент вдоль направления оси y , а отрицательное значение — в противоположном направлении.

Примеры:

transform: translateY(300px); transform: translateY(-50%); transform: translateY(150%);

scale()

transform: scale( [, ]?); /* Знак вопроса указывает второе значение, которое является необязательным * /

Функция CSS transform scale используется для масштабирования (растягивания или сжатия ) элемента путем изменения его размеров в большую или в меньшую сторону. Она принимает в качестве значения одно или два числа без единиц измерения, sx и sy , где sx изменяет размеры элемента по оси х , а sy — по оси у . Если указано только одно значение (sx ), второе значение (sy ) будет рассматриваться, как равное первому.

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

Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно нулю, то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента в определенном направлении.

Примеры:

transform: scale(1, 1); /* элемент остается без изменений */ transform: scale(2, 2); /* элемент выглядит в два раза больше, чем его исходные размеры */ transform: scale(1, 2); /* элемент растягивается по вертикали вдвое от своей исходной высоты, его горизонтальные размеры остаются без изменений. Аналогичный эффект дает применение функции scaleY(2) (см. ниже) */ transform: scale(2, 1); /* элемент растягивается по горизонтали вдвое от своей исходной ширины, его вертикальные размеры остаются без изменений. Аналогичный эффект дает применение функции scaleX(2) (см. ниже) */ transform: scale(3); /* элемент увеличивается в размерах в 3 раза */ transform: scale(0.5); /* элемент сжимается до половины своих исходных размеров */ transform: scale(0); /* элемент исчезает */ transform: scale(-1); /* поворачивает элемент в обоих направлениях */

На следующем рисунке показан результат применения к изображению различных преобразований scale() . Первое слева — изображение без каких-либо преобразований. Второе — результат применения transform: scale(2); , третье — результат применения transform: scale(0.5) , а четвертое — результат применения transform: scale(0.5, 1.5); .

Обратите внимание, как изображения накладываются друг на друга, так как преобразование каждого из них не влияет на поток контента вокруг него:

Результат применения к изображению различных преобразований scale(). Первое слева — изображение без каких-либо преобразований. Второе — результат применения transform: scale(2);, третье — результат применения transform: scale(0.5), а четвертое — результат применения transform: scale(0.5, 1.5);.

Следующее изображение является результатом применения преобразования CSS transform scale (и его вариаций ) с отрицательными значениями:

Изображение, показывающее результат применения функции scale() с отрицательными значениями.

scaleX()

transform: scaleX();

Функция scaleX() используется для масштабирования, растягивания или сжатия элемента, делая его больше или меньше, по оси х . Она принимает в качестве значения число sx , которое используется для изменения размера элемента по оси х .

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

Если значение равно 0 , то элемент исчезает. Отрицательные значения допустимы, но они не изменяют размеров элемента. Они задают поворот преобразуемого элемента по горизонтали (как будто он поворачивается вокруг оси y ).

Примеры:

transform: scaleX(2); /* растягивает элемент вдвое от его исходных размеров по оси x */ transform: scaleX(1); /* элемент остается без изменений */ transform: scaleX(0.25); /* сжимает элемент по оси x до четверти от его исходных размеров */ transform: scaleX(-1); /* поворачивает элемент по оси x */

scaleY()

transform: scaleY();

Функция CSS transform scaleY() используется для масштабирования, растягивания или сжатия элемента в размерах по оси у . Она принимает в качестве значения число sу , которое используется для изменения размера элемента по оси y .

Если указанное значение больше 1 , то элемент растягивается — он будет выглядеть выше по оси y . Если значение равно 1 , то элемент остается без изменений. Если значение больше 0 , но меньше 1 , то элемент сжимается. Если значение равно 0 , то элемент исчезает.

Отрицательные значения допустимы, но они не изменяют размеров элемента. Фактически они задают поворот преобразуемого элемента по вертикали (как будто он поворачивается вокруг оси x ).

Примеры:

transform: scaleY(2); /* растягивает элемент вдвое от его исходных размеров по оси y */ transform: scaleY(1); /* элемент остается без изменений */ transform: scaleY(0.25); /* сжимает элемент по оси y до четверти от его исходных размеров */ transform: scaleY(-1); /* поворачивает элемент по оси y */

rotate()

transform: rotate(<угол>);

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

Положительное значение задает вращение элемента по часовой стрелке. Отрицательное значение — против часовой стрелки.

Примеры:

transform: rotate(45deg); transform: rotate(-60deg); transform: rotate(1.5rad); transform: rotate(1turn);

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

Положительное значение функции rotate() поворачивает изображение по часовой стрелке, в то время как отрицательное значение поворачивает его против часовой стрелки.

skew()

transform: skew(<угол> [, <угол>]?);

Функция skew() используется для наклона (скоса ) элемента. Наклон элемента выглядит, как применение для него эффекта скоса. Функция принимает один или два аргумента: ax и ay . Оба являются значениями углов. Первое значение (ах ) скашивает элемент вдоль оси х , а второй аргумент (ау ) — вдоль оси у .

Скашивание вдоль оси х похоже на то, если бы мы потянули противоположные углы в противоположные стороны, а скашивание вдоль оси у — если бы мы потянули противоположные углы вертикально в противоположных направлениях (вверх и вниз ). Два значения определяют величину, на которую скашивается элемент. Если второе значение не указано, оно считается равным 0 .

Функция transform skew CSS присутствовала в ранних версиях спецификации. Она был удалена из нее, но по-прежнему присутствует в некоторых реализациях. *Не используйте ее *. Чтобы скосить элемент в любом направлении, используйте функции skewX() и skewY() , описанные ниже. Также обратите внимание на то, что поведение функции skew() отличается от умножения преобразований skewX() и skewY() .

skewX()

transform: skewX(<угол>);

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

Функция принимает в качестве значения ax . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов (ах ).

Если значение угла положительное, «растягиваются » левый верхний и нижний правый углы прямоугольника. Если значение отрицательное — верхний правый и нижний левый угол. При значении угла в 90 градусов (или -90 градусов ) элемент исчезнет. Значение 180 градусов (или -180 градусов ) оставит его без изменений.

Примеры:

transform: skewX(30deg); transform: skewX(-30deg); transform: skewX(-0.5rad); transform: skewX(-1turn); transform: skewX(-90deg);

На приведенном ниже рисунке показан результат применения к изображению skewX() с положительным, а затем с отрицательным углом одной и той же величины:

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

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

skewY()

transform: skewY();

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

Функция CSS transform принимает в качестве значения ау . Элемент скашивается на величину угла. Можно представить себе, что мы растягиваем две противоположные вершины прямоугольника в противоположных направлениях до тех пор, пока внутреннее значение этих углов не достигнет 90 градусов – ау .

Если значение угла положительное, «растягиваются » левый верхний и нижний правый угол прямоугольника. Если значение отрицательное — верхний правый и нижний левый. При значении угла 90 градусов (или -90 градусов ) элемент исчезнет. Значение 180 градусов (или -180 градусов ) оставит его без изменений.

Примеры:

transform: skewY(30deg); transform: skewY(-30deg); transform: skewY(-0.5rad); transform: skewY(-1turn); transform: skewY(-90deg);

На следующем рисунке показан результат применения к изображению skewY() с положительным, а затем с отрицательным углом одной и той же величины:

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

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

matrix()

transform: matrix( [, ]{5,5})

Функция matrix() используется для указания двухмерной матрицы преобразования. Она может быть использована для объединения нескольких преобразований в одно. Например, вместо использования двух (или более ) функций преобразования (смотрите выше ) в одном объявлении, например, следующим образом:

transform: rotate(45deg) translate(24px,25px);

С помощью функции CSStransform matrix можно объединить эти два преобразования в одну матрицу:

transform: matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, -0.7071067811865426, 34.648232278140824);

Вычислить значения функции matrix3d() будет нелегко. К счастью, Эрик Мейер и Аарон Густафсон создали весьма полезный инструмент , который может выполнить расчеты вместо вас. Все, что нужно сделать, это ввести значения transform , которые вам нужны, и нажать на красную кнопку, чтобы инструмент сгенерировал для вас эквивалентную функцию matrix() .

Функции 3D-преобразования:

translateZ()

transform: translateZ(tz);

Функция translateZ() используется для перемещения элемента на заданное расстояние вдоль оси z . Значение tz задается в единицах длины (проценты здесь не допускаются ). Если единицы измерения не указаны, число будет рассматриваться, как «пользовательские единицы «.

Положительное значение перемещает элемент вдоль положительного направления оси z , а отрицательное значения — в противоположном направлении.

Примеры:

transform: translateZ(300px); transform: translateZ(-5em); transform: translateZ(4vh);

translate3d()

transform: translate3d(tx , ty, tz);

Функция translate3d() является трехмерным аналогом функции CSS transform translate . Она используется, чтобы переместить элемент по вектору , где tx — смещение вдоль оси х , ty — смещение вдоль оси у , а tz — смещение вдоль оси z . Значения tx и ty указываются в единицах длины или процентах. Значение tz должно указываться в единицах длины и не может задаваться в процентах. Если единицы измерения не указаны, число будет рассматриваться, как «пользовательские единицы «.

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

Примеры:

transform: translate3d(100px, 100px, -200px); transform: translate3d(50%, -100%, 1em); transform: translate3d(-100px, -30px, 5vw);

scaleZ()

transform: scaleZ(<число>);

Функция scaleZ() используется для масштабирования элемента в третьем измерении, вдоль оси z . Она принимает в качестве значения число без единиц измерения sz , которое используется для изменения размеров элемента в соответствующем направлении.

Примеры:

transform: scaleZ(2); transform: scaleZ(1); /* элемент остается без изменений */ transform: scaleZ(0.25); transform: scaleZ(-1);

Формально, scaleZ() масштабирует элемент вдоль оси z . Но фактически, это выглядит наподобие того, как если бы масштабировалась (сжималась / растягивалась ) сама ось z , а затем элемент смещался бы вместе с осью после ее масштабирования.

Эффект CSS transform scaleZ более очевиден, когда у вас есть элемент с заданной перспективой, который вращается в трехмерном пространстве или перемещается вдоль оси z .

В первом примере у нас есть два элемента, которые расположены в трехмерном пространстве и перемещаются вдоль оси z с помощью функции translateZ() . Оба перемещаются на одинаковое расстояние. Затем мы масштабируем второй элемент (правый ), используя scaleZ(2) . На следующем рисунке показан результат применения преобразований, а также разница между этими двумя элементами после масштабирования второго с помощью функции scaleZ .

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

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

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

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

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

scale3d()

transform: scale3d(<число>, <число>, <число>);

Функция scale3d() является трехмерным аналогом функции scale() . Она используется для сжатия или растягивания элемента, делая его больше или меньше. Функция принимает в качестве значений три числа без единиц измерения: sx , sy , и sz . Где: sx масштабирует элемент по оси х , sy — по оси у , а sz — по оси z .

Если заданное значение больше 1 , элемент растягивается в соответствующих направлениях и будет выглядеть больше. Если значение равно 1 , то он остается неизменным (в соответствующих направлениях ). Если значение больше 0 , но меньше 1 , то элемент сжимается.

Если значение равно 0 , то элемент исчезает. Отрицательные значения допускаются, но они не масштабируют элемент. На самом деле отрицательные значения sx и sy поворачивают элемент по соответствующей оси.

Примеры:

transform: scale3d(1, 1, 1); /* элемент остается без изменений */ transform: scale3d(2, 2, 2); /* элемент выглядит вдвое больше от его исходных размеров */ transform: scale3d(1, 2, 0); transform: scale3d(2, 1, 3); transform: scale3d(-1, -1, -1);

rotate3d()

transform: rotate3d(<число>, <число>, <число>, <угол>);

Функция rotate3d() является трехмерным аналогом функции CSS transform rotate . Она используется для вращения элемента в трехмерном пространстве. Элемент поворачивается на угол, который передается в качестве четвертого параметра. Первые три параметра определяют направление вращения, и вместе они образуют направление вектора , который используется, чтобы применить вращение в заданном направлении.

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

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

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

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

Примеры:

transform: rotate3d(1, 1, 2, 45deg); transform: rotate3d(2, 1, 3, 33deg); transform: rotate3d(1, 0, 0, 45deg); /* элемент поворачивается по часовой стрелке вокруг оси x на 45 градусов */ transform: rotate3d(0, 1, 0, 45deg); /* элемент поворачивается по часовой стрелке вокруг оси y на 45 градусов */ transform: rotate3d(0, 0, 1, 45deg); /* элемент поворачивается по часовой стрелке вокруг оси z на 45 градусов */ transform: rotate3d(0, 0, 0, 50deg); /* ПОВОРОТ НЕ ПРИМЕНЯЕТСЯ */

На следующем рисунке показан результат применения к изображению преобразования rotate3d (1, 1, 1, 50deg); :

Результат применения к изображению преобразования rotate3d(1, 1, 1, 50deg);

rotateX()

transform: rotateX(<угол>);

Функция rotateX() используется для вращения элемента вокруг оси х в трехмерном пространстве. Это эквивалентно:

transform: rotate3d(1, 0, 0, <угол>);

где CSS transform rotate3d — это функция преобразования, используемая для вращения элемента в трехмерном пространстве.

Функция принимает в качестве значение угол. Элемент поворачивается на указанное значение вокруг оси х. Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное элемент — против часовой. Направление по часовой стрелке определяется, если смотреть на ось х с конца (где, как правило, размещается стрелка указателя направления) на начало координат.

Примеры:

transform: rotateX(30deg); transform: rotateX(-135deg); transform: rotateX(90deg);

На следующем рисунке показан результат применения к изображению rotateX(50deg) и rotateX(-50deg) :

Результат применения к изображению rotateX(50deg) и rotateX(-50deg)

rotateY()

transform: rotateY();

Функция rotateY() используется для вращения элемента вокруг оси y в трехмерном пространстве. Это эквивалентно:

transform: rotate3d(0, 1, 0, );

Функция принимает в качестве значения угол. Элемент поворачивается на указанное значение вокруг оси у . Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное — против часовой стрелки

Примеры:

transform: rotateY(30deg); transform: rotateY(-135deg); transform: rotateY(90deg);

На следующем рисунке показан результат применения к изображению rotateY(50deg) и rotateY(-50deg) :

Результат применения к изображению rotateY(50deg) и rotateY(-50deg)

rotateZ()

преобразование: rotateZ (<угол>); transform: rotateZ(<угол>);

Функция CSS transform rotateZ() используется для вращения элемента вокруг оси z в трехмерном пространстве. Это эквивалентно:

transform: rotate3d(0, 0, 1, <угол>);

где rotate3d — это функция преобразования, используемая для вращения элемента в трехмерном пространстве.

Элемент поворачивается на указанное значение вокруг оси z . Если значение положительное, элемент поворачивается по часовой стрелке, если — против часовой стрелки.

Примеры:

transform: rotateZ(30deg); transform: rotateZ(-135deg); transform: rotateZ(90deg);

На следующем рисунке показан результат применения к изображению rotateZ(50deg) и rotateZ(-50deg) :

Результат применения к изображению rotateZ(50deg) и rotateZ(-50deg)

matrix3d()

transform: matrix3d(<число> [, <число> ]{15,15});

Функция matrix3d() является трехмерным эквивалентом функции matrix() . matrix3d() используется для объединения преобразований в одну матрицу и описания последовательностей трехмерных преобразований в сетке 4 ; 4 .

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

transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px);

Можно объединить эти два преобразования в одну матрицу с помощью функции CSS transform matrix3d() :

transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)

perspective()

transform: perspective(<длина>)

Техническое описание:

Функция perspective() задает матрицу перспективной проекции. Эта матрица масштабирует точки в X и Y , основываясь на их значениях Z , масштабируя точки с положительными значениями Z в направлении от начала координат, а с отрицательными значениями Z — в направлении к началу координат.

Точка на плоскости Z = 0 не изменяются. Значение длины, передаваемое в функцию, определяет расстояние от плоскости Z = 0 до зрителя. Более низкие значения дают более сплюснутую пирамиду и, следовательно, с перспективой эффект становится более выраженным. Например, значение длины 1000 пикселей в перспективе задает небольшие изменения, а значение 200 пикселей — намного большие. Значение глубины должно быть больше 0 , в противном случае функция является недействительной:

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

Другими словами…

Функция CSS transform perspective() используется, чтобы задать глубину элемента, делая элементы, расположенные выше по оси z (ближе к зрителю ), выглядящими больше, а элементы, расположенные дальше — выглядящими меньше. Чем меньше значение, тем ближе плоскость z к зрителю и тем больше выражен эффект. Чем выше значение, тем дальше от экрана расположен элемент и тем меньше наблюдаются изменения в перспективе.

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

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

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

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

На изображении показана разница между изображением, вращаемом в трехмерном пространстве с перспективой, и изображением, вращаемым без перспективы

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

На изображении показан результат применения к элементу разных значений perspective()

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

Примечания

Элемент может быть перемещен с помощью свойства CSS position и его связанных свойств. Но лучше перемещать элемент с помощью функции CSS transform translate , потому что она задействует аппаратное ускорение и обеспечивает более высокую производительность. Функция translate3d() также иногда используется, чтобы применить аппаратное ускорение при анимировании элементов в WebKit-браузерах . Это позволяет создать более плавную анимацию.

Примеры

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

div { /* общие стили... */ width: 100px; height: 100px; background-color: #0099CC; /* преобразование */ transform: translate(80px, 80px) rotate(45deg) scale(1.5, 1.5); }

Результат применения к элементу указанных выше преобразований

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

В этом transform CSS примере к элементу применяется перспектива с помощью функции perspective() :

Element { /* ... */ transform: perspective(800px) rotateY(90deg) translateZ(300px); }

Можно выполнить то же самое преобразование, но вместо того, чтобы применять к элементу перспективу, можно активировать в контейнере 3D-пространство :

Parent { /* ... */ perspective: 800px; } .child { /* ... */ transform: rotateY(90deg) translateZ(300px); }

Интерактивная демо-версия

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

Посмотреть демо

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

Ниже приводится таблица поддержки двухмерных CSS-преобразований :

Поддержка 2D-преобразований CSS3

Метод преобразования элемента, включая вращение, масштабирование и т.д., включает поддержку свойства CSS transform , а также свойства transform-origin .

Текущий статус: рабочий проект W3C

Поддерживается со следующих версий:

* — требуется префикс.

Ниже приводится таблица поддержки трехмерных преобразований CSS :

Поддержка 3D-преобразований CSS3

Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility

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

Перемещение может быть немного сумасшедшим, как это:

Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:

Your browser does not support inline frames or is currently configured not to display inline frames.

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

Преобразование с помощью translate3d()

При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют несколько свойств CSS , которые применяются для этого. Но я хочу порекомендовать вам использовать функцию translate3d свойства transform вместо привычных margin , padding , left , top , потому что она обеспечивает более плавную анимацию.

Функция translate3d принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали:

Аргумент Х задает перемещение по горизонтали, Y — по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом:

Foo { transform: translate3d(20px, 20px, 0px); }

Третий аргумент, который определяет перемещение по оси Z , мы рассматривать не будем. Так как нас интересует 2d-hover эффекты CSS .

Как видите, функция translate3d не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS для создания движения.

Переход

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

PictureContainer img { position: relative; top: 0px; transition: transform .2s ease-in-out; }

Определив переход, вы можете задать свойство transform с функцией translate3d :

PictureContainer img:hover { transform: translate3d(0px, -150px, 0px); }

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

Анимация

В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d :

@keyframes bobble { 0% { transform: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; } 50% { transform: translate3d(50px, 50px, 0px); animation-timing-function: ease-out; } 100% { transform: translate3d(50px, 40px, 0px); } }

Пример из статьи содержит все, что нужно, чтобы вы увидели, как работает CSS hover эффект для табличной верстки.

Не забывайте о префиксах

Чтобы разметка работала в различных браузерах, обязательно используйте для свойства transform вендорные префиксы или библиотеку —prefix-free .

Переходы с помощью JavaScript

Также можно создавать анимацию перемещения в JavaScript . Те же правила действуют и здесь. Сначала нужно установить позицию, используя transform translate3d , но в JavaScript это немного сложнее.

Фрагмент кода, который нужен для этого, выглядит следующим образом:

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

Почему нам не подходит установка позиции с помощью margin , top , left и т.д.?

Если у вас нет на то особой причины, не используйте для создания hover эффектов CSS свойства margin , padding , top , left , bottom или right . Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить…

Ненужные вычисления

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

Вы можете задать для position элемента, который вы перемещаете, значение fixed или absolute . Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d не обязательно будет идентичен результату, получаемому при использовании margin , padding и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны.

Аппаратное ускорение

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

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

А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU ? Применить translate3d ! При преобразовании элемента с помощью translate3d он обрабатывается через GPU в Webkit-браузерах , таких как Chrome и Safari (которые установлены на iPhone и iPad ), в Internet Explorer 9/10 , а также в последних версиях Firefox . Это дает translate3d явные преимущества.

Как насчет JavaScript?

Что касается hover эффектов CSS , созданных на JavaScript , где все интерполяции обрабатывается кодом, я на самом деле не знаю, является ли использование GPU таким продуктивным. Но для установки с помощью JavaScript переходов и анимации CSS со свойством translate3d используется GPU .

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

Боже, благослови преобразования!

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