Генератор преобразований CSS

Составьте и скопируйте 2D-преобразование

1. Отредактируйте начальное вращение или добавьте функцию преобразования. Выбирайте единицы измерения для перевода, включите или отключите строки, а также дублируйте или перемещайте их в письменном порядке CSS.
2. Установите начало координат X и Y в пикселях или процентах. Размер рамки образца составляет 120 на 60 пикселей CSS; процентные значения используют исходные размеры перед преобразованием.
3. Проверьте текущий CSS и иллюстративный предварительный просмотр, затем используйте «Копировать CSS». Недействительные активные черновики удерживают CSS и преобразованную цель. Очистить удаляет функции; Сброс восстанавливает начальное вращение и центрированное начало координат.

Порядок, происхождение и справочные размеры

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

В выводе объявляется transform-box: border-box и текущее начало преобразования. Процентное перемещение и происхождение используют непреобразованную рамку элемента, а не его родительский элемент, рамку предварительного просмотра или его преобразованные границы.

Значения начала пикселей уже являются расстояниями. Горизонтальное начало 50% на образце определяется как 120 пикселей, умноженное на 50, деленное на 100, что дает 60 пикселей; по вертикали 60 умножить на 50 разделить на 100 даст 30 пикселей. Другой размер цели меняет процентную геометрию.

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

Примеры композиций

С началом координат в верхнем левом углу translate(30px, -10px) rotate(90deg) сопоставляет опорную точку (4, 5) с (25, -6). Вращение действует на точку перед письменным переводом. Перестановка строк дает (5, 34).

В рамке размером 240 на 80 пикселей translate(-25%, 150%) означает смещение -60 и 120 пикселей. Проценты по-прежнему вычисляются из поля перед вращением вокруг него.

skew(45deg, -45deg) отличается от skewX(45deg) skewY(-45deg). Отрицательный масштаб может отражать образец, а нулевой масштаб или другое сингулярное преобразование может заставить его исчезнуть, не делая при этом созданный CSS недействительным.

Ограничения области действия и предварительного просмотра

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

Предварительный просмотр может равномерно масштабировать фиксированный кадр по размеру карты и обрезать содержимое за пределами этого кадра. Он не соответствует каждой преобразованной границе. Масштабирование кадра, направляющие и размеры образца не добавляются к скопированному CSS.

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

В выводе сохраняются включенные строки, единицы измерения и явные идентификаторы без их объединения или преобразования в вычисляемую матрицу. Неверный активный ввод или начало координат удерживают текущие CSS и Copy вместо отображения последнего действительного результата как текущего.

Локальный стиль без сохраненной истории

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