Трансформации в CSS: как работает свойство transform
2026-02-21 01:33 Diff
https://skillbox.ru/media/code/transformacii-v-css-kak-rabotaet-svoystvo-transform/

#статьи

  • 8 сен 2025
  • 0

Разбираем функции rotate, scale, translate, skew и показываем примеры их применения в интерфейсах.

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

Содержание

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

Главное преимущество этого инструмента в том, что он действует на уже готовый элемент: вам не нужно менять HTML‑структуру, загружать новые изображения или подключать дополнительные блоки. Всё происходит прямо в браузере за счёт визуальных преобразований, которыми легко управлять из CSS.

Свойство transform не меняет сам объект в коде, оно лишь трансформирует способ его отображения. Элемент остаётся на своём месте в потоке документа, но зрительно может находиться в любом другом месте, которое вы зададите.

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

  • rotate() поворачивает элемент;
  • scale() изменяет его размер;
  • translate() перемещает его по странице;
  • skew() его наклоняет.

Ещё есть расширенные возможности: объединение нескольких функций сразу, использование матриц преобразования и 3D-эффектов.

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

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

Главное отличие состоит в том, что трансформации не влияют на поток документа. Если, например, повернуть картинку на 45 градусов, все соседние блоки останутся на своих местах, будто картинка всё ещё занимает прежнее положение.

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

Есть ещё один нюанс. Как только к элементу применяется transform, он начинает вести себя особым образом: для вложенных элементов создаётся свой контекст наложения. Это значит, что они будут располагаться друг под другом только в пределах этого элемента и не смогут выйти за его границы по z-index.

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

Свойство transform записывается как функция с параметрами в скобках. Базовый синтаксис выглядит так:

.element { transform: функция(значение); }

Например:

.element { transform: scale(1.2); }

В этом случае элемент увеличится на 20%. Если не задавать никаких значений, у свойства будет значение none, то есть никаких преобразований не произойдёт.

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

.element { transform: rotate(45deg) scale(1.5) translate(20px, 30px); }

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

Чтобы код работал правильно, следите за синтаксисом:

  • функции разделяются пробелом — rotate(45deg) scale(1.5);
  • в дробных значениях используется точка — scale(1.5);
  • в translate() координаты отделяются запятой — translate(20px, 30px).

Свойство поддерживает и глобальные значения CSS:

  • inherit — унаследовать значение от родителя;
  • initial — сбросить до значения по умолчанию;
  • unset — отменить настройки и вернуть базовое поведение.

Функция translate() смещает элемент относительно его исходного положения. При этом поток документа остаётся прежним: соседи элемента ведут себя так, будто он на месте.

Простейший пример:

.translate-element { transform: translate(50px, 100px); }

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

Если нужно сдвинуть объект только по одной оси, можно использовать отдельные функции:

.translate { transform: translateX(30px); /* Только по горизонтали */ transform: translateY(-20px); /* Только по вертикали */ }

translate() принимает и процентные значения. В этом случае смещение рассчитывается относительно размеров самого элемента. Приём часто используют для центрирования:

.center-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

А вот пример популярного эффекта «всплывания» карточки по наведению:

.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); }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

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

.rotate-element { transform: rotate(45deg); }

Углы можно указывать в разных единицах измерения:

  • deg (градусы) — от 0deg до 360deg для полного оборота;
  • rad (радианы) — 6.28rad равны полному обороту;
  • grad (грады) — 400grad равны полному обороту;
  • turn (обороты) — 1turn равен полному обороту.
.different-units { /* Все эти записи эквивалентны */ transform: rotate(90deg); transform: rotate(1.57rad); transform: rotate(100grad); transform: rotate(0.25turn); }

Практический пример поворота иконки при наведении:

HTML

<a href="#" class="menu-icon">≡</a>

CSS

.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); }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

Если нужно постоянное вращение, то rotate() используют вместе с CSS‑анимацией. Например, так можно сделать индикатор загрузки:

HTML

<div class="spinner-container"> <div class="loading-spinner"></div> <p>Загрузка...</p> </div>

CSS

@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; }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

Функция scale() увеличивает или уменьшает элемент. Значение 1 означает исходный размер, больше 1 — увеличение, меньше 1 — уменьшение.

.scale-element { transform: scale(1.5); /* Увеличение в 1.5 раза */ }

Можно задать одно или два значения. Одно число масштабирует элемент равномерно по обеим осям, два числа — отдельно по ширине и высоте:

.scale { transform: scale(2); /* Равномерное масштабирование */ transform: scale(2, 0.5); /* По X в 2 раза, по Y в 0.5 */ }

Для точной настройки используют функции scaleX() и scaleY():

.axis-scaling { transform: scaleX(2); /* Только по ширине */ transform: scaleY(0.8); /* Только по высоте */ }

Сделаем кнопку, которая будет увеличиваться при наведении.

HTML

<button class="button" type="button">Нажми меня</button>

CSS

.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); }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

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

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

.skew-element { transform: skew(20deg, 10deg); }

Первый параметр задаёт наклон по оси X, второй — по оси Y. Для наклона по одной оси используются отдельные функции:

.axis-skew { transform: skewX(15deg); /* Наклон по горизонтали */ transform: skewY(-10deg); /* Наклон по вертикали */ }

skew() часто применяется для создания стилизованных элементов интерфейса:

.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); }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

Функция matrix() объединяет все возможные 2D-трансформации в одну математическую операцию. Она принимает шесть параметров, которые описывают математику преобразования.

.matrix-element { transform: matrix(1, 0, 0, 1, 50, 100); }

Эта запись означает: элемент остаётся без изменений по масштабу и наклону, но смещается на 50 пикселей по оси X и на 100 пикселей по оси Y.

Параметры функции matrix() можно представить так:

  • scaleX() — масштабирование по горизонтали;
  • skewY() — наклон по вертикали;
  • skewX() — наклон по горизонтали;
  • scaleY() — масштабирование по вертикали;
  • translateX() — смещение по горизонтали;
  • translateY() — смещение по вертикали.

Например, вот матрица, которая даёт тот же эффект, что и поворот на 45 градусов:

.rotate-matrix { transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); }

На практике писать такие числа вручную почти не приходится — браузер всё равно приводит наши rotate(), scale() или translate() к матричной форме. Но понимать принцип может быть полезно, если вы работаете с графикой, сложными анимациями или библиотеками, которые оперируют именно матрицами.

Для трёхмерных эффектов используется расширенная версия — matrix3d(). Она принимает уже 16 параметров и описывает преобразования в 3D‑пространстве.

.matrix-3d { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }

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

3D-трансформации добавляют веб-интерфейсам глубину и объём. Они работают в трёхмерном пространстве с осями X, Y и Z, где Z-ось направлена от экрана к зрителю.

Основные 3D функции:

.element-3d { transform: translateZ(50px); /* Перемещение по Z */ transform: rotateX(45deg); /* Поворот вокруг X */ transform: rotateY(45deg); /* Поворот вокруг Y */ transform: rotateZ(45deg); /* Поворот вокруг Z */ transform: scaleZ(1.5); /* Масштаб по Z */ }
  • rotateX() наклоняет элемент вперёд или назад, словно он качается по вертикали. rotateY() разворачивает его влево или вправо — это похоже на открывание двери.
  • Чтобы 3D-эффекты выглядели реалистично, нужно задать перспективу. Она создаёт ощущение глубины: объекты вдали кажутся меньше и смещаются к центру. В CSS это делается с помощью свойства perspective, которое обычно задают родительскому элементу:

Для работы 3D-трансформаций нужно задать перспективу родительскому элементу: создать ощущение глубины — то есть сделать так, чтобы браузер «понимал», как элементы должны выглядеть в трёхмерном пространстве. Именно для этого используется перспектива (perspective), и её обычно задают родительскому элементу.

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

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

HTML

<div class="card-container"> <div class="card"> <p class="card-face front">Передняя сторона</p> <p class="card-face back">Обратная сторона</p> </div> </div>

CSS

/* Контейнер задаёт перспективу — то, как «камера» смотрит на сцену */ .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); /* Обратная сторона изначально перевёрнута */ }Результат работы кода в браузере при указании свойства perspective
Скриншот: Google Chrome / Skillbox Media

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

Результат работы кода в браузере без указания свойства perspective
Скриншот: Google Chrome / Skillbox Media

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

.combined-transform { transform: rotate(45deg) scale(1.5) translate(20px, 30px); /* Порядок применения: translate → scale → rotate */ }

Изменение порядка функций даёт разные результаты:

/* Сначала поворот, потом перемещение */ .version-a { transform: translate(100px, 0) rotate(45deg); }

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

/* Сначала перемещение, потом поворот */ .version-b { transform: rotate(45deg) translate(100px, 0); }

В первом случае элемент повернётся вокруг центра и уже потом переместится. Во втором он сначала окажется на новом месте, а поворот выполнится вокруг этой новой точки.

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

Скриншот: Google Chrome / Skillbox Media

Сделаем это в реальности:

HTML

<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>

CSS

.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; }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

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

Пример:

.element { transform: rotate(45deg); transform-origin: top left; /* Поворот вокруг верхнего левого угла */ }

Свойство принимает два значения: по горизонтали и по вертикали. Их можно задать с помощью ключевых слов (top, bottom, left, right, center) или с помощью единиц измерения (px, %).

.origin-example { transform: scale(1.5); transform-origin: 0% 100%; /* Нижний левый угол */ }

В этом случае элемент увеличится, отталкиваясь от нижнего края.

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

.card { transform: rotateY(45deg); transform-origin: center center -50px; }Демонстрация анимации поворота в зависимости от точки трансформации
Скриншот: Google Chrome / Skillbox Media

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

Для создания плавных переходов достаточно свойства transition. Например, в этом случае кнопка слегка увеличивается при наведении:

.button { padding: 12px 24px; background: #3498db; color: #fff; border: none; border-radius: 4px; transition: transform 0.3s ease; } .button:hover { transform: scale(1.1); }

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

Наглядное представление работы временных функций
Скриншот: Google Chrome / Skillbox Media

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

Тем не менее есть несколько вещей, о которых стоит помнить:

  • Сдвиги с помощью translate() быстрее, чем с помощью top или left. Если нужно перемещать блоки, лучше использовать именно transform.
  • Подсказка браузеру с помощью will-change. Если элемент часто анимируется, можно заранее указать, что будет меняться:
.animated { will-change: transform; }

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

  • Следите за количеством анимаций. Несколько плавных эффектов страница потянет легко, но, если одновременно двигать десятки элементов, могут появиться задержки.
  • Осторожнее с 3D. Перспектива и сложные повороты красиво смотрятся, но они всегда тяжелее для процессора, чем простые повороты и смещения.

Трансформации можно использовать вместе с opacity и filter. Так эффекты выглядят выразительнее.

.card { transition: transform 0.3s ease, opacity 0.3s ease; } .card:hover { transform: scale(1.05); opacity: 0.8; /* Карточка становится чуть прозрачнее */ }

При наведении карточка слегка увеличивается и становится полупрозрачной.

Один из самых надёжных способов выровнять элемент по центру контейнера — использовать смещение на 50% и translate(-50%, -50%).

.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

При таком подходе окно всегда будет по центру, независимо от его размеров.

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

.icon { transition: transform 0.3s ease; } .icon:hover { transform: rotate(20deg) scale(1.2); }

Иконка увеличивается и поворачивается, но остаётся кликабельной в пределах своего нового положения.

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

.link { display: inline-block; transition: transform 0.2s ease; } .link:hover { transform: translateY(-2px); /* Лёгкий «подскок» ссылки */ }

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

gsap.to(".ball", { x: 200, y: 100, duration: 1, ease: "bounce.out" });

В этом примере шарик подпрыгивает с эффектом отскока. Настроить такое поведение в чистом CSS было бы гораздо сложнее.

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

HTML

<div class="menu-toggle" id="menuToggle"> <span class="menu-line"></span> <span class="menu-line"></span> <span class="menu-line"></span> </div>

CSS

/* Основной контейнер иконки */ .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); }

JavaScript

const menuToggle = document.getElementById("menuToggle"); menuToggle.addEventListener("click", () => { menuToggle.classList.toggle("menu-open"); });Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

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

HTML

<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>

CSS

/* Полноэкранный контейнер */ .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; }

JavaScript

// Имитация загрузки window.onload = function () { setTimeout(() => { document.body.classList.add("loaded"); }, 5000); };Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media

Попробуем сделать трёхмерную анимацию.

HTML

<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>

CSS

/* Контейнер сцены — он задаёт перспективу */ .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); } }Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media
Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе