Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор CSS-трансформаций 2D и 3D
Настройте сдвиг, поворот, масштаб, наклон и точку преобразования, при необходимости добавив перспективу и 3D.
Параметры 3D
Предпросмотр
Пунктир отмечает исходное положение. Порядок преобразований влияет на результат; экспортируемый CSS соответствует предпросмотру.
CSS
Об инструменте
Размещайте или наклоняйте элемент, сравнивая его с исходным контуром.
Как пользоваться
Изменяйте сдвиг X/Y, поворот, масштаб по осям, наклон и исходную точку, сравнивая результат с начальным контуром. Включите 3D для перспективы, сдвига Z и поворотов X/Y. Скопируйте или скачайте обе декларации: transform и transform-origin.
Предпросмотр и результат используют одинаковые параметры в фиксированном порядке. Перестановка функций может изменить эффект. Отрицательный масштаб отражает элемент, нулевой сжимает соответствующую ось. Инструмент создаёт стили элемента, а не 3D-модель или полноценную анимацию.
Частые вопросы
Можно ли изменить порядок функций?
Порядок можно изменить вручную в экспортированном CSS; в интерфейсе такой настройки нет. Предпросмотр и экспорт используют один фиксированный порядок, от которого зависит результат. Отрицательный масштаб отражает ось, нулевой — схлопывает её.
Почему после сдвига или масштабирования остаётся исходное место элемента?
CSS-трансформации меняют отображение элемента, но не перемещают его исходный блок в раскладке. Поэтому соседнее содержимое сохраняет своё положение. Для расстояний используйте правила раскладки, а с помощью transform-origin задавайте опорную точку визуального преобразования.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0