0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>8 сен 2025</li>
2
<ul><li>8 сен 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Разбираем функции rotate, scale, translate, skew и показываем примеры их применения в интерфейсах.</p>
4
</ul><p>Разбираем функции rotate, scale, translate, skew и показываем примеры их применения в интерфейсах.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Свойство CSS transform открывает множество возможностей для создания интерактивных интерфейсов. С его помощью можно поворачивать элементы, менять их размер, перемещать их по странице и создавать впечатляющие визуальные эффекты без использования JavaScript. Трансформации стали основой современного веб-дизайна. Они позволяют создавать плавные анимации, адаптивные компоненты и динамичные пользовательские интерфейсы.</p>
7
<p>Свойство CSS transform открывает множество возможностей для создания интерактивных интерфейсов. С его помощью можно поворачивать элементы, менять их размер, перемещать их по странице и создавать впечатляющие визуальные эффекты без использования JavaScript. Трансформации стали основой современного веб-дизайна. Они позволяют создавать плавные анимации, адаптивные компоненты и динамичные пользовательские интерфейсы.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Что такое CSS transform и зачем оно нужно</a></li>
9
<ul><li><a>Что такое CSS transform и зачем оно нужно</a></li>
10
<li><a>Как работают трансформации в браузере</a></li>
10
<li><a>Как работают трансформации в браузере</a></li>
11
<li><a>Как пишется свойство transform</a></li>
11
<li><a>Как пишется свойство transform</a></li>
12
<li><a>Функция translate(): перемещение элементов</a></li>
12
<li><a>Функция translate(): перемещение элементов</a></li>
13
<li><a>Функция rotate(): поворот элементов</a></li>
13
<li><a>Функция rotate(): поворот элементов</a></li>
14
<li><a>Функция scale(): масштабирование элементов</a></li>
14
<li><a>Функция scale(): масштабирование элементов</a></li>
15
<li><a>Функция skew(): наклон элемента</a></li>
15
<li><a>Функция skew(): наклон элемента</a></li>
16
<li><a>Функция matrix(): матричные преобразования</a></li>
16
<li><a>Функция matrix(): матричные преобразования</a></li>
17
<li><a>3D-трансформации</a></li>
17
<li><a>3D-трансформации</a></li>
18
<li><a>Комбинирование нескольких функций</a></li>
18
<li><a>Комбинирование нескольких функций</a></li>
19
<li><a>Точка трансформации - свойство transform-origin</a></li>
19
<li><a>Точка трансформации - свойство transform-origin</a></li>
20
<li><a>Transform в анимациях и переходах</a></li>
20
<li><a>Transform в анимациях и переходах</a></li>
21
<li><a>Производительность и оптимизация</a></li>
21
<li><a>Производительность и оптимизация</a></li>
22
<li><a>Практические советы и лайфхаки</a></li>
22
<li><a>Практические советы и лайфхаки</a></li>
23
<li><a>Реальные примеры использования</a></li>
23
<li><a>Реальные примеры использования</a></li>
24
<li><a>Полезные ссылки</a></li>
24
<li><a>Полезные ссылки</a></li>
25
</ul><p>Свойство transform позволяет изменить то, как браузер отображает элемент: сместить его, повернуть, увеличить, уменьшить или создать иллюзию трёхмерного пространства.</p>
25
</ul><p>Свойство transform позволяет изменить то, как браузер отображает элемент: сместить его, повернуть, увеличить, уменьшить или создать иллюзию трёхмерного пространства.</p>
26
<p>Главное преимущество этого инструмента в том, что он действует на уже готовый элемент: вам не нужно менять HTML‑структуру, загружать новые изображения или подключать дополнительные блоки. Всё происходит прямо в браузере за счёт визуальных преобразований, которыми легко управлять из CSS.</p>
26
<p>Главное преимущество этого инструмента в том, что он действует на уже готовый элемент: вам не нужно менять HTML‑структуру, загружать новые изображения или подключать дополнительные блоки. Всё происходит прямо в браузере за счёт визуальных преобразований, которыми легко управлять из CSS.</p>
27
<p>Свойство transform не меняет сам объект в коде, оно лишь трансформирует способ его отображения. Элемент остаётся на своём месте в потоке документа, но зрительно может находиться в любом другом месте, которое вы зададите.</p>
27
<p>Свойство transform не меняет сам объект в коде, оно лишь трансформирует способ его отображения. Элемент остаётся на своём месте в потоке документа, но зрительно может находиться в любом другом месте, которое вы зададите.</p>
28
<p>Свойство работает с помощью специальных функций. Каждая отвечает за определённый тип изменения:</p>
28
<p>Свойство работает с помощью специальных функций. Каждая отвечает за определённый тип изменения:</p>
29
<ul><li>rotate() поворачивает элемент;</li>
29
<ul><li>rotate() поворачивает элемент;</li>
30
<li>scale() изменяет его размер;</li>
30
<li>scale() изменяет его размер;</li>
31
<li>translate() перемещает его по странице;</li>
31
<li>translate() перемещает его по странице;</li>
32
<li>skew() его наклоняет.</li>
32
<li>skew() его наклоняет.</li>
33
</ul><p>Ещё есть расширенные возможности: объединение нескольких функций сразу, использование матриц преобразования и 3D-эффектов.</p>
33
</ul><p>Ещё есть расширенные возможности: объединение нескольких функций сразу, использование матриц преобразования и 3D-эффектов.</p>
34
<p>В современных интерфейсах трансформации используются во всём: для анимирования кнопок при наведении, плавного выведения блоков, создания 3D‑каруселей и прочего. Они позволяют обойтись без JavaScript во многих случаях, а браузеры обрабатывают такие эффекты на графическом процессоре, поэтому они работают быстро и плавно даже на мобильных.</p>
34
<p>В современных интерфейсах трансформации используются во всём: для анимирования кнопок при наведении, плавного выведения блоков, создания 3D‑каруселей и прочего. Они позволяют обойтись без JavaScript во многих случаях, а браузеры обрабатывают такие эффекты на графическом процессоре, поэтому они работают быстро и плавно даже на мобильных.</p>
35
<p>Механизм работы свойства transform немного иной, чем у большинства CSS‑свойств. Когда браузер отрисовал элемент со всеми стилями и содержимым, он помещает его на отдельный слой. После этого трансформации применяются уже не к самому элементу в разметке, а к этому "снимку". Проще говоря, браузер как будто берёт готовое изображение объекта и вращает его, смещает, наклоняет или растягивает.</p>
35
<p>Механизм работы свойства transform немного иной, чем у большинства CSS‑свойств. Когда браузер отрисовал элемент со всеми стилями и содержимым, он помещает его на отдельный слой. После этого трансформации применяются уже не к самому элементу в разметке, а к этому "снимку". Проще говоря, браузер как будто берёт готовое изображение объекта и вращает его, смещает, наклоняет или растягивает.</p>
36
<p>Главное отличие состоит в том, что трансформации не влияют на поток документа. Если, например, повернуть картинку на 45 градусов, все соседние блоки останутся на своих местах, будто картинка всё ещё занимает прежнее положение.</p>
36
<p>Главное отличие состоит в том, что трансформации не влияют на поток документа. Если, например, повернуть картинку на 45 градусов, все соседние блоки останутся на своих местах, будто картинка всё ещё занимает прежнее положение.</p>
37
<p>Все преобразования происходят относительно определённой точки, которая называется точкой трансформации, или transform-origin. По умолчанию она находится в центре элемента, но можно сместить её в любой угол или задать ей точные координаты. Меняя эту точку, можно получать разные визуальные эффекты - например, вращение вокруг угла вместо вращения вокруг центра.</p>
37
<p>Все преобразования происходят относительно определённой точки, которая называется точкой трансформации, или transform-origin. По умолчанию она находится в центре элемента, но можно сместить её в любой угол или задать ей точные координаты. Меняя эту точку, можно получать разные визуальные эффекты - например, вращение вокруг угла вместо вращения вокруг центра.</p>
38
<p>Есть ещё один нюанс. Как только к элементу применяется transform, он начинает вести себя особым образом: для вложенных элементов создаётся свой контекст наложения. Это значит, что они будут располагаться друг под другом только в пределах этого элемента и не смогут выйти за его границы по z-index.</p>
38
<p>Есть ещё один нюанс. Как только к элементу применяется transform, он начинает вести себя особым образом: для вложенных элементов создаётся свой контекст наложения. Это значит, что они будут располагаться друг под другом только в пределах этого элемента и не смогут выйти за его границы по z-index.</p>
39
<p>По сути, трансформации работают на последнем этапе отрисовки - когда страница уже готова. Это позволяет менять внешний вид элементов без лишних пересчётов макета, поэтому эффекты работают быстро и плавно.</p>
39
<p>По сути, трансформации работают на последнем этапе отрисовки - когда страница уже готова. Это позволяет менять внешний вид элементов без лишних пересчётов макета, поэтому эффекты работают быстро и плавно.</p>
40
<p>Свойство transform записывается как функция с параметрами в скобках. Базовый синтаксис выглядит так:</p>
40
<p>Свойство transform записывается как функция с параметрами в скобках. Базовый синтаксис выглядит так:</p>
41
.element { transform: функция(значение); }<p>Например:</p>
41
.element { transform: функция(значение); }<p>Например:</p>
42
.element { transform: scale(1.2); }<p>В этом случае элемент увеличится на 20%. Если не задавать никаких значений, у свойства будет значение none, то есть никаких преобразований не произойдёт.</p>
42
.element { transform: scale(1.2); }<p>В этом случае элемент увеличится на 20%. Если не задавать никаких значений, у свойства будет значение none, то есть никаких преобразований не произойдёт.</p>
43
<p>Часто используют не одну функцию, а несколько сразу. Тогда они записываются через пробел:</p>
43
<p>Часто используют не одну функцию, а несколько сразу. Тогда они записываются через пробел:</p>
44
.element { transform: rotate(45deg) scale(1.5) translate(20px, 30px); }<p>Браузер выполняет функции справа налево. В примере выше элемент сначала переместится, потом увеличится и только после этого повернётся.</p>
44
.element { transform: rotate(45deg) scale(1.5) translate(20px, 30px); }<p>Браузер выполняет функции справа налево. В примере выше элемент сначала переместится, потом увеличится и только после этого повернётся.</p>
45
<p>Чтобы код работал правильно, следите за синтаксисом:</p>
45
<p>Чтобы код работал правильно, следите за синтаксисом:</p>
46
<ul><li>функции разделяются пробелом - rotate(45deg) scale(1.5);</li>
46
<ul><li>функции разделяются пробелом - rotate(45deg) scale(1.5);</li>
47
<li>в дробных значениях используется точка - scale(1.5);</li>
47
<li>в дробных значениях используется точка - scale(1.5);</li>
48
<li>в translate() координаты отделяются запятой - translate(20px, 30px).</li>
48
<li>в translate() координаты отделяются запятой - translate(20px, 30px).</li>
49
</ul><p>Свойство поддерживает и глобальные значения CSS:</p>
49
</ul><p>Свойство поддерживает и глобальные значения CSS:</p>
50
<ul><li>inherit - унаследовать значение от родителя;</li>
50
<ul><li>inherit - унаследовать значение от родителя;</li>
51
<li>initial - сбросить до значения по умолчанию;</li>
51
<li>initial - сбросить до значения по умолчанию;</li>
52
<li>unset - отменить настройки и вернуть базовое поведение.</li>
52
<li>unset - отменить настройки и вернуть базовое поведение.</li>
53
</ul><p>Функция translate() смещает элемент относительно его исходного положения. При этом поток документа остаётся прежним: соседи элемента ведут себя так, будто он на месте.</p>
53
</ul><p>Функция translate() смещает элемент относительно его исходного положения. При этом поток документа остаётся прежним: соседи элемента ведут себя так, будто он на месте.</p>
54
<p>Простейший пример:</p>
54
<p>Простейший пример:</p>
55
.translate-element { transform: translate(50px, 100px); }<p>Первое значение отвечает за смещение по горизонтали (ось X), второе - за смещение по вертикали (ось Y). Положительные числа двигают элемент вправо и вниз, отрицательные - влево и вверх.</p>
55
.translate-element { transform: translate(50px, 100px); }<p>Первое значение отвечает за смещение по горизонтали (ось X), второе - за смещение по вертикали (ось Y). Положительные числа двигают элемент вправо и вниз, отрицательные - влево и вверх.</p>
56
<p>Если нужно сдвинуть объект только по одной оси, можно использовать отдельные функции:</p>
56
<p>Если нужно сдвинуть объект только по одной оси, можно использовать отдельные функции:</p>
57
.translate { transform: translateX(30px); /* Только по горизонтали */ transform: translateY(-20px); /* Только по вертикали */ }<p>translate() принимает и процентные значения. В этом случае смещение рассчитывается относительно размеров самого элемента. Приём часто используют для центрирования:</p>
57
.translate { transform: translateX(30px); /* Только по горизонтали */ transform: translateY(-20px); /* Только по вертикали */ }<p>translate() принимает и процентные значения. В этом случае смещение рассчитывается относительно размеров самого элемента. Приём часто используют для центрирования:</p>
58
.center-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<p>Так элемент оказывается ровно в центре контейнера: сначала его верхний левый угол ставится в центр, а затем весь блок сдвигается назад на половину своей ширины и высоты.</p>
58
.center-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<p>Так элемент оказывается ровно в центре контейнера: сначала его верхний левый угол ставится в центр, а затем весь блок сдвигается назад на половину своей ширины и высоты.</p>
59
<p>А вот пример популярного эффекта "всплывания" карточки по наведению:</p>
59
<p>А вот пример популярного эффекта "всплывания" карточки по наведению:</p>
60
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция rotate() поворачивает элемент вокруг его центральной точки на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные - против часовой стрелки.</p>
60
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция rotate() поворачивает элемент вокруг его центральной точки на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные - против часовой стрелки.</p>
61
.rotate-element { transform: rotate(45deg); }<p>Углы можно указывать в разных единицах измерения:</p>
61
.rotate-element { transform: rotate(45deg); }<p>Углы можно указывать в разных единицах измерения:</p>
62
<ul><li>deg (градусы) - от 0deg до 360deg для полного оборота;</li>
62
<ul><li>deg (градусы) - от 0deg до 360deg для полного оборота;</li>
63
<li>rad (радианы) - 6.28rad равны полному обороту;</li>
63
<li>rad (радианы) - 6.28rad равны полному обороту;</li>
64
<li>grad (грады) - 400grad равны полному обороту;</li>
64
<li>grad (грады) - 400grad равны полному обороту;</li>
65
<li>turn (обороты) - 1turn равен полному обороту.</li>
65
<li>turn (обороты) - 1turn равен полному обороту.</li>
66
</ul>.different-units { /* Все эти записи эквивалентны */ transform: rotate(90deg); transform: rotate(1.57rad); transform: rotate(100grad); transform: rotate(0.25turn); }<p>Практический пример поворота иконки при наведении:</p>
66
</ul>.different-units { /* Все эти записи эквивалентны */ transform: rotate(90deg); transform: rotate(1.57rad); transform: rotate(100grad); transform: rotate(0.25turn); }<p>Практический пример поворота иконки при наведении:</p>
67
<p><strong>HTML</strong></p>
67
<p><strong>HTML</strong></p>
68
<a href="#" class="menu-icon">≡</a><p><strong>CSS</strong></p>
68
<a href="#" class="menu-icon">≡</a><p><strong>CSS</strong></p>
69
.menu-icon { display: inline-block; width: 50px; height: 50px; font-size: 40px; line-height: 50px; color: #333; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid #333; border-radius: 50%; transition: transform 0.3s ease; } .menu-icon:hover { transform: rotate(180deg); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Если нужно постоянное вращение, то rotate() используют вместе с CSS‑анимацией. Например, так можно сделать индикатор загрузки:</p>
69
.menu-icon { display: inline-block; width: 50px; height: 50px; font-size: 40px; line-height: 50px; color: #333; text-align: center; text-decoration: none; cursor: pointer; border: 2px solid #333; border-radius: 50%; transition: transform 0.3s ease; } .menu-icon:hover { transform: rotate(180deg); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Если нужно постоянное вращение, то rotate() используют вместе с CSS‑анимацией. Например, так можно сделать индикатор загрузки:</p>
70
<p><strong>HTML</strong></p>
70
<p><strong>HTML</strong></p>
71
<div class="spinner-container"> <div class="loading-spinner"></div> <p>Загрузка...</p> </div><p><strong>CSS</strong></p>
71
<div class="spinner-container"> <div class="loading-spinner"></div> <p>Загрузка...</p> </div><p><strong>CSS</strong></p>
72
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-spinner { display: inline-block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } .spinner-container { text-align: center; } .spinner-container p { margin-top: 20px; color: #555; }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция scale() увеличивает или уменьшает элемент. Значение 1 означает исходный размер, больше 1 - увеличение, меньше 1 - уменьшение.</p>
72
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-spinner { display: inline-block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } .spinner-container { text-align: center; } .spinner-container p { margin-top: 20px; color: #555; }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция scale() увеличивает или уменьшает элемент. Значение 1 означает исходный размер, больше 1 - увеличение, меньше 1 - уменьшение.</p>
73
.scale-element { transform: scale(1.5); /* Увеличение в 1.5 раза */ }<p>Можно задать одно или два значения. Одно число масштабирует элемент равномерно по обеим осям, два числа - отдельно по ширине и высоте:</p>
73
.scale-element { transform: scale(1.5); /* Увеличение в 1.5 раза */ }<p>Можно задать одно или два значения. Одно число масштабирует элемент равномерно по обеим осям, два числа - отдельно по ширине и высоте:</p>
74
.scale { transform: scale(2); /* Равномерное масштабирование */ transform: scale(2, 0.5); /* По X в 2 раза, по Y в 0.5 */ }<p>Для точной настройки используют функции scaleX() и scaleY():</p>
74
.scale { transform: scale(2); /* Равномерное масштабирование */ transform: scale(2, 0.5); /* По X в 2 раза, по Y в 0.5 */ }<p>Для точной настройки используют функции scaleX() и scaleY():</p>
75
.axis-scaling { transform: scaleX(2); /* Только по ширине */ transform: scaleY(0.8); /* Только по высоте */ }<p>Сделаем кнопку, которая будет увеличиваться при наведении.</p>
75
.axis-scaling { transform: scaleX(2); /* Только по ширине */ transform: scaleY(0.8); /* Только по высоте */ }<p>Сделаем кнопку, которая будет увеличиваться при наведении.</p>
76
<p><strong>HTML</strong></p>
76
<p><strong>HTML</strong></p>
77
<button class="button" type="button">Нажми меня</button><p><strong>CSS</strong></p>
77
<button class="button" type="button">Нажми меня</button><p><strong>CSS</strong></p>
78
.button { padding: 12px 24px; font-size: 16px; color: #ffffff; cursor: pointer; background: #3498db; border: none; border-radius: 4px; outline: none; transform: scale(1); transition: transform 0.3s ease; } .button:hover { transform: scale(1.05); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Вместе с элементом изменяется всё его содержимое: текст, рамки, внутренние отступы. Поэтому при сильном увеличении или уменьшении внешний вид может исказиться.</p>
78
.button { padding: 12px 24px; font-size: 16px; color: #ffffff; cursor: pointer; background: #3498db; border: none; border-radius: 4px; outline: none; transform: scale(1); transition: transform 0.3s ease; } .button:hover { transform: scale(1.05); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Вместе с элементом изменяется всё его содержимое: текст, рамки, внутренние отступы. Поэтому при сильном увеличении или уменьшении внешний вид может исказиться.</p>
79
<p>Функция skew() наклоняет элемент, создавая эффект перспективы или искажения. Элемент деформируется вдоль одной или обеих осей, сохраняя свою площадь.</p>
79
<p>Функция skew() наклоняет элемент, создавая эффект перспективы или искажения. Элемент деформируется вдоль одной или обеих осей, сохраняя свою площадь.</p>
80
.skew-element { transform: skew(20deg, 10deg); }<p>Первый параметр задаёт наклон по оси X, второй - по оси Y. Для наклона по одной оси используются отдельные функции:</p>
80
.skew-element { transform: skew(20deg, 10deg); }<p>Первый параметр задаёт наклон по оси X, второй - по оси Y. Для наклона по одной оси используются отдельные функции:</p>
81
.axis-skew { transform: skewX(15deg); /* Наклон по горизонтали */ transform: skewY(-10deg); /* Наклон по вертикали */ }<p>skew() часто применяется для создания стилизованных элементов интерфейса:</p>
81
.axis-skew { transform: skewX(15deg); /* Наклон по горизонтали */ transform: skewY(-10deg); /* Наклон по вертикали */ }<p>skew() часто применяется для создания стилизованных элементов интерфейса:</p>
82
.diagonal-button { padding: 15px 25px; color: #ffffff; background: linear-gradient(45deg, #ff6b6b, #ff8e8e); border: none; transition: transform 0.2s ease; transform: skewX(-10deg); } .diagonal-button:hover { transform: skewX(-5deg) scale(1.05); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция matrix() объединяет все возможные 2D-трансформации в одну математическую операцию. Она принимает шесть параметров, которые описывают математику преобразования.</p>
82
.diagonal-button { padding: 15px 25px; color: #ffffff; background: linear-gradient(45deg, #ff6b6b, #ff8e8e); border: none; transition: transform 0.2s ease; transform: skewX(-10deg); } .diagonal-button:hover { transform: skewX(-5deg) scale(1.05); }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Функция matrix() объединяет все возможные 2D-трансформации в одну математическую операцию. Она принимает шесть параметров, которые описывают математику преобразования.</p>
83
.matrix-element { transform: matrix(1, 0, 0, 1, 50, 100); }<p>Эта запись означает: элемент остаётся без изменений по масштабу и наклону, но смещается на 50 пикселей по оси X и на 100 пикселей по оси Y.</p>
83
.matrix-element { transform: matrix(1, 0, 0, 1, 50, 100); }<p>Эта запись означает: элемент остаётся без изменений по масштабу и наклону, но смещается на 50 пикселей по оси X и на 100 пикселей по оси Y.</p>
84
<p>Параметры функции matrix() можно представить так:</p>
84
<p>Параметры функции matrix() можно представить так:</p>
85
<ul><li>scaleX() - масштабирование по горизонтали;</li>
85
<ul><li>scaleX() - масштабирование по горизонтали;</li>
86
<li>skewY() - наклон по вертикали;</li>
86
<li>skewY() - наклон по вертикали;</li>
87
<li>skewX() - наклон по горизонтали;</li>
87
<li>skewX() - наклон по горизонтали;</li>
88
<li>scaleY() - масштабирование по вертикали;</li>
88
<li>scaleY() - масштабирование по вертикали;</li>
89
<li>translateX() - смещение по горизонтали;</li>
89
<li>translateX() - смещение по горизонтали;</li>
90
<li>translateY() - смещение по вертикали.</li>
90
<li>translateY() - смещение по вертикали.</li>
91
</ul><p>Например, вот матрица, которая даёт тот же эффект, что и поворот на 45 градусов:</p>
91
</ul><p>Например, вот матрица, которая даёт тот же эффект, что и поворот на 45 градусов:</p>
92
.rotate-matrix { transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); }<p>На практике писать такие числа вручную почти не приходится - браузер всё равно приводит наши rotate(), scale() или translate() к матричной форме. Но понимать принцип может быть полезно, если вы работаете с графикой, сложными анимациями или библиотеками, которые оперируют именно матрицами.</p>
92
.rotate-matrix { transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); }<p>На практике писать такие числа вручную почти не приходится - браузер всё равно приводит наши rotate(), scale() или translate() к матричной форме. Но понимать принцип может быть полезно, если вы работаете с графикой, сложными анимациями или библиотеками, которые оперируют именно матрицами.</p>
93
<p>Для трёхмерных эффектов используется расширенная версия - matrix3d(). Она принимает уже 16 параметров и описывает преобразования в 3D‑пространстве.</p>
93
<p>Для трёхмерных эффектов используется расширенная версия - matrix3d(). Она принимает уже 16 параметров и описывает преобразования в 3D‑пространстве.</p>
94
.matrix-3d { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }<p>Существуют JavaScript-библиотеки, которые упрощают преобразование функций transform в матричный формат. Если нужно, можно ими воспользоваться. Но современные браузеры так хорошо поддерживают свойство transform, что для повседневных задач достаточно базовых, упрощённых функций.</p>
94
.matrix-3d { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }<p>Существуют JavaScript-библиотеки, которые упрощают преобразование функций transform в матричный формат. Если нужно, можно ими воспользоваться. Но современные браузеры так хорошо поддерживают свойство transform, что для повседневных задач достаточно базовых, упрощённых функций.</p>
95
<p>3D-трансформации добавляют веб-интерфейсам глубину и объём. Они работают в трёхмерном пространстве с осями X, Y и Z, где Z-ось направлена от экрана к зрителю.</p>
95
<p>3D-трансформации добавляют веб-интерфейсам глубину и объём. Они работают в трёхмерном пространстве с осями X, Y и Z, где Z-ось направлена от экрана к зрителю.</p>
96
<p>Основные 3D функции:</p>
96
<p>Основные 3D функции:</p>
97
.element-3d { transform: translateZ(50px); /* Перемещение по Z */ transform: rotateX(45deg); /* Поворот вокруг X */ transform: rotateY(45deg); /* Поворот вокруг Y */ transform: rotateZ(45deg); /* Поворот вокруг Z */ transform: scaleZ(1.5); /* Масштаб по Z */ }<ul><li>rotateX() наклоняет элемент вперёд или назад, словно он качается по вертикали. rotateY() разворачивает его влево или вправо - это похоже на открывание двери.</li>
97
.element-3d { transform: translateZ(50px); /* Перемещение по Z */ transform: rotateX(45deg); /* Поворот вокруг X */ transform: rotateY(45deg); /* Поворот вокруг Y */ transform: rotateZ(45deg); /* Поворот вокруг Z */ transform: scaleZ(1.5); /* Масштаб по Z */ }<ul><li>rotateX() наклоняет элемент вперёд или назад, словно он качается по вертикали. rotateY() разворачивает его влево или вправо - это похоже на открывание двери.</li>
98
<li>Чтобы 3D-эффекты выглядели реалистично, нужно задать перспективу. Она создаёт ощущение глубины: объекты вдали кажутся меньше и смещаются к центру. В CSS это делается с помощью свойства perspective, которое обычно задают родительскому элементу:</li>
98
<li>Чтобы 3D-эффекты выглядели реалистично, нужно задать перспективу. Она создаёт ощущение глубины: объекты вдали кажутся меньше и смещаются к центру. В CSS это делается с помощью свойства perspective, которое обычно задают родительскому элементу:</li>
99
</ul><p>Для работы 3D-трансформаций нужно задать перспективу родительскому элементу: создать ощущение глубины - то есть сделать так, чтобы браузер "понимал", как элементы должны выглядеть в трёхмерном пространстве. Именно для этого используется перспектива (perspective), и её обычно задают родительскому элементу.</p>
99
</ul><p>Для работы 3D-трансформаций нужно задать перспективу родительскому элементу: создать ощущение глубины - то есть сделать так, чтобы браузер "понимал", как элементы должны выглядеть в трёхмерном пространстве. Именно для этого используется перспектива (perspective), и её обычно задают родительскому элементу.</p>
100
<p>Свойство perspective задают родительскому элементу, потому что именно он определяет точку обзора - откуда зритель смотрит на 3D-сцену. Если задать perspective непосредственно самому элементу, эффект будет применён только к нему и при анимации или вращении может выглядеть неестественно.</p>
100
<p>Свойство perspective задают родительскому элементу, потому что именно он определяет точку обзора - откуда зритель смотрит на 3D-сцену. Если задать perspective непосредственно самому элементу, эффект будет применён только к нему и при анимации или вращении может выглядеть неестественно.</p>
101
<p>Когда мы задаём perspective родительскому контейнеру, он играет роль камеры, через которую мы смотрим на сцену. Все дочерние элементы будут воспринимать пространство одинаково, что делает картинку реалистичной.</p>
101
<p>Когда мы задаём perspective родительскому контейнеру, он играет роль камеры, через которую мы смотрим на сцену. Все дочерние элементы будут воспринимать пространство одинаково, что делает картинку реалистичной.</p>
102
<p><strong>HTML</strong></p>
102
<p><strong>HTML</strong></p>
103
<div class="card-container"> <div class="card"> <p class="card-face front">Передняя сторона</p> <p class="card-face back">Обратная сторона</p> </div> </div><p><strong>CSS</strong></p>
103
<div class="card-container"> <div class="card"> <p class="card-face front">Передняя сторона</p> <p class="card-face back">Обратная сторона</p> </div> </div><p><strong>CSS</strong></p>
104
/* Контейнер задаёт перспективу - то, как "камера" смотрит на сцену */ .card-container { width: 200px; height: 300px; perspective: 1000px; /* Ключевое: создаём 3D-пространство */ margin: 50px auto; } /* Сама карточка - вращается в 3D */ .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* Сохраняем 3D-контекст для дочерних элементов */ transition: transform 0.8s ease; border-radius: 10px; } /* При наведении поворачиваем карточку */ .card-container:hover .card { transform: rotateY(180deg); } /* Передняя и задняя грани */ .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Скрываем сторону, когда она "развёрнута" назад */ display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #ffffff; border-radius: 10px; } .front { background-color: #3498db; } .back { background-color: #e74c3c; transform: rotateY(180deg); /* Обратная сторона изначально перевёрнута */ }Результат работы кода в браузере при указании свойства<em>perspectiveСкриншот: Google Chrome / Skillbox Media</em><p>Но обратите внимание, как плоско переворачивается карточка, если убрать из кода свойство perspective.</p>
104
/* Контейнер задаёт перспективу - то, как "камера" смотрит на сцену */ .card-container { width: 200px; height: 300px; perspective: 1000px; /* Ключевое: создаём 3D-пространство */ margin: 50px auto; } /* Сама карточка - вращается в 3D */ .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* Сохраняем 3D-контекст для дочерних элементов */ transition: transform 0.8s ease; border-radius: 10px; } /* При наведении поворачиваем карточку */ .card-container:hover .card { transform: rotateY(180deg); } /* Передняя и задняя грани */ .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Скрываем сторону, когда она "развёрнута" назад */ display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #ffffff; border-radius: 10px; } .front { background-color: #3498db; } .back { background-color: #e74c3c; transform: rotateY(180deg); /* Обратная сторона изначально перевёрнута */ }Результат работы кода в браузере при указании свойства<em>perspectiveСкриншот: Google Chrome / Skillbox Media</em><p>Но обратите внимание, как плоско переворачивается карточка, если убрать из кода свойство perspective.</p>
105
Результат работы кода в браузере без указания свойства perspective<em>Скриншот: Google Chrome / Skillbox Media</em><p>Сила свойства transform проявляется тогда, когда мы объединяем разные функции. Элемент можно одновременно переместить, повернуть и увеличить - всё в одной строке.</p>
105
Результат работы кода в браузере без указания свойства perspective<em>Скриншот: Google Chrome / Skillbox Media</em><p>Сила свойства transform проявляется тогда, когда мы объединяем разные функции. Элемент можно одновременно переместить, повернуть и увеличить - всё в одной строке.</p>
106
.combined-transform { transform: rotate(45deg) scale(1.5) translate(20px, 30px); /* Порядок применения: translate → scale → rotate */ }<p>Изменение порядка функций даёт разные результаты:</p>
106
.combined-transform { transform: rotate(45deg) scale(1.5) translate(20px, 30px); /* Порядок применения: translate → scale → rotate */ }<p>Изменение порядка функций даёт разные результаты:</p>
107
/* Сначала поворот, потом перемещение */ .version-a { transform: translate(100px, 0) rotate(45deg); }<p>Здесь сначала произойдёт смещение, потом масштабирование, а только после этого - поворот. Порядок важен, потому что браузер выполняет функции справа налево. Если поменять их местами, результат будет другим:</p>
107
/* Сначала поворот, потом перемещение */ .version-a { transform: translate(100px, 0) rotate(45deg); }<p>Здесь сначала произойдёт смещение, потом масштабирование, а только после этого - поворот. Порядок важен, потому что браузер выполняет функции справа налево. Если поменять их местами, результат будет другим:</p>
108
/* Сначала перемещение, потом поворот */ .version-b { transform: rotate(45deg) translate(100px, 0); }<p>В первом случае элемент повернётся вокруг центра и уже потом переместится. Во втором он сначала окажется на новом месте, а поворот выполнится вокруг этой новой точки.</p>
108
/* Сначала перемещение, потом поворот */ .version-b { transform: rotate(45deg) translate(100px, 0); }<p>В первом случае элемент повернётся вокруг центра и уже потом переместится. Во втором он сначала окажется на новом месте, а поворот выполнится вокруг этой новой точки.</p>
109
<p>На практике такой приём часто используют для создания небольших живых эффектов. Например, карточка товара при наведении может чуть приподниматься, слегка наклоняться и увеличиваться:</p>
109
<p>На практике такой приём часто используют для создания небольших живых эффектов. Например, карточка товара при наведении может чуть приподниматься, слегка наклоняться и увеличиваться:</p>
110
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Сделаем это в реальности:</p>
110
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Сделаем это в реальности:</p>
111
<p><strong>HTML</strong></p>
111
<p><strong>HTML</strong></p>
112
<div class="product-card"> <div class="product-image">????</div> <h3 class="title">Кроссовки "SkyWalk"</h3> <p class="text">Лёгкие, стильные, с амортизацией и вентиляцией.</p> <div class="price">от 8 990 ₽</div> </div><p><strong>CSS</strong></p>
112
<div class="product-card"> <div class="product-image">????</div> <h3 class="title">Кроссовки "SkyWalk"</h3> <p class="text">Лёгкие, стильные, с амортизацией и вентиляцией.</p> <div class="price">от 8 990 ₽</div> </div><p><strong>CSS</strong></p>
113
.product-card { width: 280px; padding: 20px; text-align: center; cursor: pointer; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Задаём точку трансформации - основание карточки */ transform-origin: center bottom; /* Добавляем плавный переход для transform */ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease; } .product-card:hover { /* Комбинируем несколько трансформаций: - поднимаем вверх; - лёгкий наклон по оси X (3D-эффект); - небольшое увеличение */ transform: translateY(-20px) rotateX(5deg) scale(1.02); /* Усиливаем тень при подъёме */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .product-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 180px; margin-bottom: 15px; font-size: 24px; color: #ffffff; background: linear-gradient(45deg, #74b9ff, #00b894); border-radius: 8px; } .title { margin: 0 0 10px; font-size: 18px; line-height: 20px; color: #2d3436; } .text { font-size: 14px; line-height: 16px; color: #636e72; } .price { margin-top: 10px; font-size: 16px; font-weight: bold; color: #2d3436; }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>По умолчанию все трансформации происходят относительно центра элемента. Но иногда нужно, чтобы он вращался вокруг угла, смещался от края или масштабировался от конкретной точки. Для этого используют свойство transform-origin.</p>
113
.product-card { width: 280px; padding: 20px; text-align: center; cursor: pointer; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Задаём точку трансформации - основание карточки */ transform-origin: center bottom; /* Добавляем плавный переход для transform */ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease; } .product-card:hover { /* Комбинируем несколько трансформаций: - поднимаем вверх; - лёгкий наклон по оси X (3D-эффект); - небольшое увеличение */ transform: translateY(-20px) rotateX(5deg) scale(1.02); /* Усиливаем тень при подъёме */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .product-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 180px; margin-bottom: 15px; font-size: 24px; color: #ffffff; background: linear-gradient(45deg, #74b9ff, #00b894); border-radius: 8px; } .title { margin: 0 0 10px; font-size: 18px; line-height: 20px; color: #2d3436; } .text { font-size: 14px; line-height: 16px; color: #636e72; } .price { margin-top: 10px; font-size: 16px; font-weight: bold; color: #2d3436; }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>По умолчанию все трансформации происходят относительно центра элемента. Но иногда нужно, чтобы он вращался вокруг угла, смещался от края или масштабировался от конкретной точки. Для этого используют свойство transform-origin.</p>
114
<p>Пример:</p>
114
<p>Пример:</p>
115
.element { transform: rotate(45deg); transform-origin: top left; /* Поворот вокруг верхнего левого угла */ }<p>Свойство принимает два значения: по горизонтали и по вертикали. Их можно задать с помощью ключевых слов (top, bottom, left, right, center) или с помощью единиц измерения (px, %).</p>
115
.element { transform: rotate(45deg); transform-origin: top left; /* Поворот вокруг верхнего левого угла */ }<p>Свойство принимает два значения: по горизонтали и по вертикали. Их можно задать с помощью ключевых слов (top, bottom, left, right, center) или с помощью единиц измерения (px, %).</p>
116
.origin-example { transform: scale(1.5); transform-origin: 0% 100%; /* Нижний левый угол */ }<p>В этом случае элемент увеличится, отталкиваясь от нижнего края.</p>
116
.origin-example { transform: scale(1.5); transform-origin: 0% 100%; /* Нижний левый угол */ }<p>В этом случае элемент увеличится, отталкиваясь от нижнего края.</p>
117
<p>Для тонкой настройки используют и третье значение - по оси Z, которое задаёт глубину. Оно особенно полезно в трёхмерных сценах, когда нужно сместить точку вращения вперёд или назад:</p>
117
<p>Для тонкой настройки используют и третье значение - по оси Z, которое задаёт глубину. Оно особенно полезно в трёхмерных сценах, когда нужно сместить точку вращения вперёд или назад:</p>
118
.card { transform: rotateY(45deg); transform-origin: center center -50px; }Демонстрация анимации поворота в зависимости от точки трансформации<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации часто используют в анимациях. Их плюс в том, что они выполняются быстро и плавно: браузер обрабатывает такие изменения на графическом процессоре, а не пересчитывает весь макет. Поэтому transform - один из самых эффективных способов оживить интерфейс.</p>
118
.card { transform: rotateY(45deg); transform-origin: center center -50px; }Демонстрация анимации поворота в зависимости от точки трансформации<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации часто используют в анимациях. Их плюс в том, что они выполняются быстро и плавно: браузер обрабатывает такие изменения на графическом процессоре, а не пересчитывает весь макет. Поэтому transform - один из самых эффективных способов оживить интерфейс.</p>
119
<p>Для создания плавных переходов достаточно свойства transition. Например, в этом случае кнопка слегка увеличивается при наведении:</p>
119
<p>Для создания плавных переходов достаточно свойства transition. Например, в этом случае кнопка слегка увеличивается при наведении:</p>
120
.button { padding: 12px 24px; background: #3498db; color: #fff; border: none; border-radius: 4px; transition: transform 0.3s ease; } .button:hover { transform: scale(1.1); }<p>Для создания более естественных анимаций можно использовать кривые ускорения (timing functions). При этом разные свойства могут требовать различных временных функций, чтобы обеспечить естественное движение элемента.</p>
120
.button { padding: 12px 24px; background: #3498db; color: #fff; border: none; border-radius: 4px; transition: transform 0.3s ease; } .button:hover { transform: scale(1.1); }<p>Для создания более естественных анимаций можно использовать кривые ускорения (timing functions). При этом разные свойства могут требовать различных временных функций, чтобы обеспечить естественное движение элемента.</p>
121
Наглядное представление работы временных функций<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации - один из самых быстрых способов менять элементы в браузере. Они работают уже с готовым элементом, а не перестраивают всю страницу. Поэтому эффекты с transform обычно выглядят плавно и не нагружают устройство.</p>
121
Наглядное представление работы временных функций<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации - один из самых быстрых способов менять элементы в браузере. Они работают уже с готовым элементом, а не перестраивают всю страницу. Поэтому эффекты с transform обычно выглядят плавно и не нагружают устройство.</p>
122
<p>Тем не менее есть несколько вещей, о которых стоит помнить:</p>
122
<p>Тем не менее есть несколько вещей, о которых стоит помнить:</p>
123
<ul><li><strong>Сдвиги с помощью</strong><strong>translate() быстрее, чем с помощью</strong><strong>top или</strong><strong>left.</strong>Если нужно перемещать блоки, лучше использовать именно transform.</li>
123
<ul><li><strong>Сдвиги с помощью</strong><strong>translate() быстрее, чем с помощью</strong><strong>top или</strong><strong>left.</strong>Если нужно перемещать блоки, лучше использовать именно transform.</li>
124
<li><strong>Подсказка браузеру с помощью</strong><strong>will-change.</strong>Если элемент часто анимируется, можно заранее указать, что будет меняться:</li>
124
<li><strong>Подсказка браузеру с помощью</strong><strong>will-change.</strong>Если элемент часто анимируется, можно заранее указать, что будет меняться:</li>
125
</ul>.animated { will-change: transform; }<p>Тогда браузер подготовит для него отдельный слой, и анимация станет плавнее. Но перебарщивать с этим свойством не стоит: лишние слои тоже требуют ресурсов.</p>
125
</ul>.animated { will-change: transform; }<p>Тогда браузер подготовит для него отдельный слой, и анимация станет плавнее. Но перебарщивать с этим свойством не стоит: лишние слои тоже требуют ресурсов.</p>
126
<ul><li><strong>Следите за количеством анимаций.</strong>Несколько плавных эффектов страница потянет легко, но, если одновременно двигать десятки элементов, могут появиться задержки.</li>
126
<ul><li><strong>Следите за количеством анимаций.</strong>Несколько плавных эффектов страница потянет легко, но, если одновременно двигать десятки элементов, могут появиться задержки.</li>
127
<li><strong>Осторожнее с 3D.</strong>Перспектива и сложные повороты красиво смотрятся, но они всегда тяжелее для процессора, чем простые повороты и смещения.</li>
127
<li><strong>Осторожнее с 3D.</strong>Перспектива и сложные повороты красиво смотрятся, но они всегда тяжелее для процессора, чем простые повороты и смещения.</li>
128
</ul><p>Трансформации можно использовать вместе с opacity и filter. Так эффекты выглядят выразительнее.</p>
128
</ul><p>Трансформации можно использовать вместе с opacity и filter. Так эффекты выглядят выразительнее.</p>
129
.card { transition: transform 0.3s ease, opacity 0.3s ease; } .card:hover { transform: scale(1.05); opacity: 0.8; /* Карточка становится чуть прозрачнее */ }<p>При наведении карточка слегка увеличивается и становится полупрозрачной.</p>
129
.card { transition: transform 0.3s ease, opacity 0.3s ease; } .card:hover { transform: scale(1.05); opacity: 0.8; /* Карточка становится чуть прозрачнее */ }<p>При наведении карточка слегка увеличивается и становится полупрозрачной.</p>
130
<p>Один из самых надёжных способов выровнять элемент по центру контейнера - использовать смещение на 50% и translate(-50%, -50%).</p>
130
<p>Один из самых надёжных способов выровнять элемент по центру контейнера - использовать смещение на 50% и translate(-50%, -50%).</p>
131
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<p>При таком подходе окно всегда будет по центру, независимо от его размеров.</p>
131
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<p>При таком подходе окно всегда будет по центру, независимо от его размеров.</p>
132
<p>При трансформациях область клика перемещается вместе с элементом. Но при масштабировании и поворотах восприятие может меняться, поэтому лучше тестировать такие эффекты.</p>
132
<p>При трансформациях область клика перемещается вместе с элементом. Но при масштабировании и поворотах восприятие может меняться, поэтому лучше тестировать такие эффекты.</p>
133
.icon { transition: transform 0.3s ease; } .icon:hover { transform: rotate(20deg) scale(1.2); }<p>Иконка увеличивается и поворачивается, но остаётся кликабельной в пределах своего нового положения.</p>
133
.icon { transition: transform 0.3s ease; } .icon:hover { transform: rotate(20deg) scale(1.2); }<p>Иконка увеличивается и поворачивается, но остаётся кликабельной в пределах своего нового положения.</p>
134
<p>Даже простой эффект при наведении помогает пользователю почувствовать, что страница реагирует на его действия.</p>
134
<p>Даже простой эффект при наведении помогает пользователю почувствовать, что страница реагирует на его действия.</p>
135
.link { display: inline-block; transition: transform 0.2s ease; } .link:hover { transform: translateY(-2px); /* Лёгкий "подскок" ссылки */ }<p>CSS подходит для создания большинства анимаций, но, если нужно смоделировать физику или одновременно двигать десятки объектов, удобнее подключить JavaScript-библиотеки, например GSAP.</p>
135
.link { display: inline-block; transition: transform 0.2s ease; } .link:hover { transform: translateY(-2px); /* Лёгкий "подскок" ссылки */ }<p>CSS подходит для создания большинства анимаций, но, если нужно смоделировать физику или одновременно двигать десятки объектов, удобнее подключить JavaScript-библиотеки, например GSAP.</p>
136
gsap.to(".ball", { x: 200, y: 100, duration: 1, ease: "bounce.out" });<p>В этом примере шарик подпрыгивает с эффектом отскока. Настроить такое поведение в чистом CSS было бы гораздо сложнее.</p>
136
gsap.to(".ball", { x: 200, y: 100, duration: 1, ease: "bounce.out" });<p>В этом примере шарик подпрыгивает с эффектом отскока. Настроить такое поведение в чистом CSS было бы гораздо сложнее.</p>
137
<p>Анимация бургер-меню - один из самых узнаваемых эффектов в вебе. При нём transform используют для превращения бургера в крестик, а transition - для того, чтобы сделать анимацию плавной и естественной.</p>
137
<p>Анимация бургер-меню - один из самых узнаваемых эффектов в вебе. При нём transform используют для превращения бургера в крестик, а transition - для того, чтобы сделать анимацию плавной и естественной.</p>
138
<p><strong>HTML</strong></p>
138
<p><strong>HTML</strong></p>
139
<div class="menu-toggle" id="menuToggle"> <span class="menu-line"></span> <span class="menu-line"></span> <span class="menu-line"></span> </div><p><strong>CSS</strong></p>
139
<div class="menu-toggle" id="menuToggle"> <span class="menu-line"></span> <span class="menu-line"></span> <span class="menu-line"></span> </div><p><strong>CSS</strong></p>
140
/* Основной контейнер иконки */ .menu-toggle { width: 30px; height: 30px; position: relative; cursor: pointer; } /* Линии бургера */ .menu-line { position: absolute; height: 2px; width: 100%; background: #333; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Расположение линий */ .menu-line:nth-child(1) { top: 6px; } .menu-line:nth-child(2) { top: 50%; transform: translateY(-50%); } .menu-line:nth-child(3) { bottom: 6px; } /* Анимация при открытии меню */ .menu-open .menu-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-open .menu-line:nth-child(2) { opacity: 0; } .menu-open .menu-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }<p><strong>JavaScript</strong></p>
140
/* Основной контейнер иконки */ .menu-toggle { width: 30px; height: 30px; position: relative; cursor: pointer; } /* Линии бургера */ .menu-line { position: absolute; height: 2px; width: 100%; background: #333; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Расположение линий */ .menu-line:nth-child(1) { top: 6px; } .menu-line:nth-child(2) { top: 50%; transform: translateY(-50%); } .menu-line:nth-child(3) { bottom: 6px; } /* Анимация при открытии меню */ .menu-open .menu-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-open .menu-line:nth-child(2) { opacity: 0; } .menu-open .menu-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }<p><strong>JavaScript</strong></p>
141
const menuToggle = document.getElementById("menuToggle"); menuToggle.addEventListener("click", () => { menuToggle.classList.toggle("menu-open"); });Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации часто используют для индикаторов загрузки. В этом примере квадрат вращается, меняет размер и прозрачность.</p>
141
const menuToggle = document.getElementById("menuToggle"); menuToggle.addEventListener("click", () => { menuToggle.classList.toggle("menu-open"); });Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Трансформации часто используют для индикаторов загрузки. В этом примере квадрат вращается, меняет размер и прозрачность.</p>
142
<p><strong>HTML</strong></p>
142
<p><strong>HTML</strong></p>
143
<div class="loader-container"> <div class="loader"></div> </div> <!-- Основной контент --> <div class="content"> <h1>Страница загружена!</h1> <p>Лоадер использовал плавные CSS-трансформации: <code>rotate</code>, <code>scale</code>, <code>opacity</code>.</p> </div><p><strong>CSS</strong></p>
143
<div class="loader-container"> <div class="loader"></div> </div> <!-- Основной контент --> <div class="content"> <h1>Страница загружена!</h1> <p>Лоадер использовал плавные CSS-трансформации: <code>rotate</code>, <code>scale</code>, <code>opacity</code>.</p> </div><p><strong>CSS</strong></p>
144
/* Полноэкранный контейнер */ .loader-container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f8f9fa; z-index: 9999; } /* Лоадер - квадрат с трансформациями */ .loader { width: 50px; height: 50px; background: #3498db; border-radius: 4px; transform-origin: center; /* Единая плавная анимация */ animation: spin-pulse 1.4s infinite ease-in-out; } /* Комбинированная анимация: вращение + плавное масштабирование + прозрачность */ @keyframes spin-pulse { 0% { transform: rotate(0deg) scale(0.8); opacity: 0.6; } 50% { transform: rotate(180deg) scale(1.05); opacity: 0.9; } 100% { transform: rotate(360deg) scale(0.8); opacity: 0.6; } } /* Основной контент */ .content { display: none; text-align: center; padding: 60px; font-family: "Arial", sans-serif; color: #333333; } /* Скрываем лоадер, когда страница "загружена" */ body.loaded .loader-container { display: none; } body.loaded .content { display: block; }<p><strong>JavaScript</strong></p>
144
/* Полноэкранный контейнер */ .loader-container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f8f9fa; z-index: 9999; } /* Лоадер - квадрат с трансформациями */ .loader { width: 50px; height: 50px; background: #3498db; border-radius: 4px; transform-origin: center; /* Единая плавная анимация */ animation: spin-pulse 1.4s infinite ease-in-out; } /* Комбинированная анимация: вращение + плавное масштабирование + прозрачность */ @keyframes spin-pulse { 0% { transform: rotate(0deg) scale(0.8); opacity: 0.6; } 50% { transform: rotate(180deg) scale(1.05); opacity: 0.9; } 100% { transform: rotate(360deg) scale(0.8); opacity: 0.6; } } /* Основной контент */ .content { display: none; text-align: center; padding: 60px; font-family: "Arial", sans-serif; color: #333333; } /* Скрываем лоадер, когда страница "загружена" */ body.loaded .loader-container { display: none; } body.loaded .content { display: block; }<p><strong>JavaScript</strong></p>
145
// Имитация загрузки window.onload = function () { setTimeout(() => { document.body.classList.add("loaded"); }, 5000); };Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Попробуем сделать трёхмерную анимацию.</p>
145
// Имитация загрузки window.onload = function () { setTimeout(() => { document.body.classList.add("loaded"); }, 5000); };Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><p>Попробуем сделать трёхмерную анимацию.</p>
146
<p><strong>HTML</strong></p>
146
<p><strong>HTML</strong></p>
147
<div class="scene"> <div class="cube"> <div class="cube-face">1</div> <div class="cube-face">2</div> <div class="cube-face">3</div> <div class="cube-face">4</div> <div class="cube-face">5</div> <div class="cube-face">6</div> </div> </div><p><strong>CSS</strong></p>
147
<div class="scene"> <div class="cube"> <div class="cube-face">1</div> <div class="cube-face">2</div> <div class="cube-face">3</div> <div class="cube-face">4</div> <div class="cube-face">5</div> <div class="cube-face">6</div> </div> </div><p><strong>CSS</strong></p>
148
/* Контейнер сцены - он задаёт перспективу */ .scene { perspective: 800px; /* Чем меньше значение, тем сильнее эффект перспективы */ width: 200px; height: 200px; margin: 100px auto; position: relative; } /* Сам куб */ .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; /* Сохраняем 3D-пространство для граней */ animation: rotate-cube 6s infinite linear; } /* Общие стили для граней */ .cube-face { position: absolute; width: 200px; height: 200px; border: 2px solid #333; background: rgba(0, 123, 255, 0.7); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #ffffff; backface-visibility: hidden; /* Чтобы не видеть обратную сторону карточки */ } /* Позиционирование граней куба */ .cube-face:nth-child(1) { transform: translateZ(100px); } /* Передняя */ .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(100px); } /* Правая */ .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(100px); } /* Задняя */ .cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); } /* Левая */ .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(100px); } /* Верхняя */ .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); } /* Нижняя */ /* Анимация вращения куба */ @keyframes rotate-cube { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li><a>MDN: CSS Transform</a></li>
148
/* Контейнер сцены - он задаёт перспективу */ .scene { perspective: 800px; /* Чем меньше значение, тем сильнее эффект перспективы */ width: 200px; height: 200px; margin: 100px auto; position: relative; } /* Сам куб */ .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; /* Сохраняем 3D-пространство для граней */ animation: rotate-cube 6s infinite linear; } /* Общие стили для граней */ .cube-face { position: absolute; width: 200px; height: 200px; border: 2px solid #333; background: rgba(0, 123, 255, 0.7); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #ffffff; backface-visibility: hidden; /* Чтобы не видеть обратную сторону карточки */ } /* Позиционирование граней куба */ .cube-face:nth-child(1) { transform: translateZ(100px); } /* Передняя */ .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(100px); } /* Правая */ .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(100px); } /* Задняя */ .cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); } /* Левая */ .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(100px); } /* Верхняя */ .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); } /* Нижняя */ /* Анимация вращения куба */ @keyframes rotate-cube { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }Результат работы кода в браузере<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li><a>MDN: CSS Transform</a></li>
149
<li><a>Can I Use: CSS Transforms</a>- поддержка свойства разными устройствами</li>
149
<li><a>Can I Use: CSS Transforms</a>- поддержка свойства разными устройствами</li>
150
<li><a>CSS Transform Generator</a>- генератор различных эффектов свойства transform</li>
150
<li><a>CSS Transform Generator</a>- генератор различных эффектов свойства transform</li>
151
<li><a>JavaScript-библиотека</a> для преобразования простых функций transform в матричный вид</li>
151
<li><a>JavaScript-библиотека</a> для преобразования простых функций transform в матричный вид</li>
152
<li><a>MDN: CSS marix()</a></li>
152
<li><a>MDN: CSS marix()</a></li>
153
</ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
153
</ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>