Генератор CSS-фильтров Transform
Бесплатный онлайн-генератор CSS-фильтров Transform, не требует установки. Визуальный редактор для редактирования свойств transform.
О CSS Transform
Интерактивно собирайте объявление transform с помощью ползунков для translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) и skew (X/Y), а также редактируемого transform-origin и настраиваемого размера окна предпросмотра. Сгенерированный CSS использует translate3d для перемещения, объединяет scale/rotate/rotateX/rotateY/skew только при их изменении и выводит их вместе с transform-origin.
Как использовать
1. Перетаскивайте ползунки в разделах Translate, Scale, Rotate и Skew, чтобы составить transform; для каждого значения также предусмотрено числовое поле для точного ввода. 2. Настройте размер окна предпросмотра Box Size (50–250px) и отредактируйте Transform-Origin (любая CSS-строка origin, по умолчанию 50% 50%). 3. Нажмите Reset, чтобы вернуть все значения к нейтральным значениям по умолчанию. 4. Нажмите Copy, чтобы скопировать как объявление transform: ..., так и transform-origin: ....
Функции Transform и диапазоны значений
translateX/Y/Z: от -200 до 200 px, выводятся вместе как translate3d(x, y, z), если хотя бы один отличен от нуля. scaleX/Y: от 0,1 до 3, выводятся как scale(x, y), если хотя бы один отличается от 1. rotate (Z): от -360 до 360deg. rotateX/Y: от -180 до 180deg. skewX/Y: от -60 до 60deg, выводятся как skew(x, y), если хотя бы один отличен от нуля. Если ни одна функция не изменена, вывод будет transform: none.
▶Почему моя ротация отображается только в 3D, а элемент выглядит плоским?
▶Включает ли вывод transform-origin?
▶Можно ли вводить точные значения вместо перетаскивания?
▶Почему translate выдаёт translate3d, даже если я сдвинул только одну ось?
Если этот инструмент оказался полезным для вас, подумайте о том, чтобы подарить мне кофе.
Купите мне кофе.