title

Теория

Через стили можно управлять внешним видом элементов, а через трансформации — их положением, масштабом и вращением. Это приближает код к визуальному дизайну: ты работаешь не только с логикой, но и с композицией, ритмом и акцентами. В Vanilla JS стили можно задавать прямо из кода, без отдельного CSS-файла. Благодаря этому интерфейс становится не просто динамическим, а выразительным.

Когда элемент уже создан, через JavaScript можно менять его свойства так же, как в CSS: цвет, размер, скругление, тень или прозрачность. Для этого используется объект style. Например, ты можешь задать background, borderRadius или boxShadow прямо в коде. Это позволяет собирать визуальную сцену программно.

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

card.style.background = "#1f1f1f";
card.style.borderRadius = "20px";
card.style.transform = "translate(40px, 0) rotate(-8deg)";
card.style.boxShadow = "0 12px 32px rgba(31, 31, 31, 0.12)";

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

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

Задача

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

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

Сборка

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

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

Теперь один блок превращается в несколько. Через цикл создаются карточки, а через индекс каждой задаётся своё положение. Так появляется ритм и начинается работа с композицией.

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

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

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

Вывод

1. Через style можно управлять внешним видом элементов прямо из кода
2. Трансформации помогают работать с положением, масштабом и вращением
3. Даже простые DOM-элементы могут складываться в выразительную композицию

Задание

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

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