Преобразования CSS изменяют положение, размер и ориентацию элементов, не влияя на поток документа. Поворот, масштабирование, перемещение и наклон можно объединить в одном свойстве преобразования, и они плавно анимируются с помощью переходов CSS.
Перетащите ползунки, чтобы увидеть каждое примененное преобразование в реальном времени. Пунктирный прямоугольник показывает исходное положение, а сплошная карточка показывает преобразованный результат. Скопируйте полное значение преобразования, когда вы будете удовлетворены.
Frequently Asked Questions
Q: В чем разница между переводом и позицией?
В чем разница между переводом и позицией? Translate визуально перемещает элемент, не меняя структуру макета. Позиция (сверху/слева) удаляет элемент из потока или сдвигает одноуровневых элементов. Translate также ускоряется на графическом процессоре и ускоряет анимацию.
Q: Влияет ли преобразование на макет?
Влияет ли преобразование на макет? Нет. Преобразованные элементы сохраняют свое исходное пространство в потоке документа, поэтому перекрытие и переполнение являются обычным явлением — используйте поля или отступы, чтобы зарезервировать пространство.
Q: Могу ли я объединить несколько преобразований?
Могу ли я объединить несколько преобразований? Да, перечислите их через пробел в одном свойстве: Transform: TranslateX(10px) Rotate(45deg) Scale(1.2); Они применяются справа налево в системе координат.
Q: Почему повернутый элемент размыт?
Почему повернутый элемент размыт? Повороты на углы, отличные от 90 градусов, вызывают артефакты сглаживания. Добавление небольшого масштаба (1,001) или использование will-change: Transform может помочь в некоторых браузерах.
Q: Работает ли преобразование с анимацией?
Работает ли преобразование с анимацией? Да, преобразование — одно из самых дешевых свойств для анимации. Используйте @keyframes или переходы — композитинг с помощью графического процессора сделает процесс плавным даже на мобильных устройствах.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.