Генератор 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: ....

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.