Первый раз а rotateY Я был уверен, что наклонит карту в экран, просто раздавил ее, вместо этого я потерял большую часть дня, прежде чем понял, почему. Не было никакой перспективы. Я написал вращение, но не одну функцию, которая заставляет вращение читаться как глубина, и CSS сделал именно то, что я ему сказал, а не то, что я имел в виду. В тот день я создаю преобразования, перетаскивая ползунки и наблюдая, как ящик отвечает, вместо того, чтобы вводить значение, сохранять, освежать и щуриться.
CSS transform свойство - одна из самых полезных вещей в языке и одна из самых простых, чтобы получить тонко неправильный. Он движется, поворачивает, масштабирует и перекосить элемент, не беспокоя ничего вокруг него, поэтому каждый эффект зависания, каждый подъем карты, каждый вход анимация опирается на него Но он упаковывает много поведения в короткую строку, порядок функций изменяет результат, и 3D функции имеют зависимость, которая невидима, пока вы не нажмете на нее. значение, которое вы можете видеть, будучи построенным, стоит гораздо больше, чем значение, которое вы должны представить.
выше Генератор трансформации CSS дает вам ползунок для каждой функции, перевести, повернуть, масштабировать, перекос и трехмерное трио rototX, rotateY и перспективы, и применяет каждое изменение к элементу предварительного просмотра в реальном времени, как вы его делаете. также позволяет установить начало преобразования, точку привязки, которая вращается и масштабирования поворачивается вокруг. Точное объявление находится в поле готовности к копированию ниже, содержащее только функции, к которым вы прикасались.
TL;DR: CSS
transformсвойства перепозиционирует и изменяет форму элемента, не влияя на макет страницы, что делает его правильным инструментом для эффектов наведения и анимации. функции применяются справа налево, поэтому порядок имеет значение; 3D-вращениям нужен aperspective()чтобы выглядеть трехмерным; и любой преобразованный элемент становится блоком, содержащим его фиксированные и абсолютные дочерние элементы. этот генератор раскрывает каждую функцию с живым предварительным просмотром, излучает только функции, которые вы меняете, и производит чистый CSS, который вы можете вставить прямо в таблицу стилей. Он полностью работает в вашем браузере без регистрации.
Какую проблему решает генератор CSS-преобразований?
выше transform свойство абстрактно так же, как CSS Grid абстрактно Вы не перемещаете пиксели напрямую; вы описываете геометрическую операцию и позволяете браузеру вычислить результат. translateX(40px) rotate(15deg) scale(1.1) является точной инструкцией, но нет никакой возможности почувствовать результат цепочки этих трех из текста в одиночку Вы должны визуализировать его. и рендеринг его в вашем собственном проекте означает цикл записи-сохранения-обновления, который достаточно медленный, что большинство людей перестают экспериментировать задолго до того, как они нашли нужное значение.
Генератор сворачивает этот цикл в ничто, Вы перетаскиваете ползунок вращения и ящик поворачивается в реальном времени Вы поднимаете масштаб и он растет от его центра Вы добавляете перевод и он скользит, сохраняя его ход Десять минут этого и отношения между числами и движением перестают быть чем-то вы переводите в вашей голове и становится что-то вы чувствуете Когда вы закончите, нет ничего, чтобы расшифровать, потому что работающий CSS был написан для вас все время.
Есть второе преимущество, которое имеет большее значение, чем кажется. построение преобразования путем манипуляции означает, что инструмент может излучать только действительный, хорошо сформированный CSS. Вы не можете создать сломанный transform значение перетаскивая ползунок, так что вывод всегда безопасно вставить. эта надежность является причиной того, что я держу полку визуальных CSS строителей близко, та же причина, по которой я тянусь к генератор коробчатых теней вместо того, чтобы вручную подсчитывать смещения теней.
Почему порядок функций преобразования имеет значение?
Это единственная деталь, которая больше всего сбивает людей с толку, и стоит понять, а не работать. когда вы перечисляете несколько функций в одной transform, браузер применяет их справа налево, каждый из которых работает в координатном пространстве, оставленном предыдущим Это означает, что порядок действительно меняется там, где элемент оказывается.
Возьмите translateX(100px) rotate(45deg) против rotate(45deg) translateX(100px). В первом элемент переводится на сто пикселей, а затем поворачивается на месте, поэтому он сидит на сто пикселей вправо и поворачивается на сорок пять градусов. Во втором сначала происходит вращение, которое поворачивает координатные оси элемента 's, а затем перевод перемещает его на сто пикселей вдоль повернутый Ось X, посылая ее по диагонали вниз и вправо.Одни и те же две функции, одни и те же два значения, совершенно разные положения.
Генератор излучает свои функции в преднамеренном порядке, перспектива сначала, затем перевод, затем вращение, затем масштабирование, затем перекос, что является разумным дефолтом, который поддерживает интуитивное поведение обычных случаев. Но как только вы понимаете, что порядок имеет смысл, вы также понимаете, почему копирование преобразования из одного места в другое иногда приводит к результату, которого вы не ожидали: вы перемещали строку, но не ментальную модель за ней. Строя его самостоятельно, и видя каждую функцию и вклад #39;s, это то, как эта модель строится.
Как сделать 3D-преобразование трехмерным?
Вот ловушка, которая стоила мне в тот день Функции rotateX а rotateY поверните элемент вокруг горизонтальной и вертикальной осей, который должен опрокинуть его к вам или от вас, как страница поворачивая Но по умолчанию в сцене нет глубины, поэтому вращение проецируется прямо на плоскую плоскость экрана и элемент просто кажется сжимать. А rotateY(60deg) без перспективы кажется, что элемент стал уже, а не как повернулся.
Недостающий ингредиент perspectiveи есть два способа его поставить. можно поставить а perspective свойство на родительском элементе, которое устанавливает общую точку схода для всех его трехмерных дочерних элементов, или вы можете добавить a perspective() функция в самом начале элемента's собственный transform, который дает этому одному элементу собственную глубину Этот генератор использует второй подход: установите ползунок перспективы, и он излучает perspective() сначала в цепочке, именно там, где это должно быть Меньшие значения, где-то между тремястами и шестьюстами пикселями, поместите точку схода близко к элементу и сделайте глубину драматичной; большие значения сглаживают эффект в сторону нежного наклона.
Пресет 3D-карты в инструменте - самый быстрый способ увидеть это. Он устанавливает перспективу в шестьсот пикселей и a rotateY из двадцати пяти градусов, и поле предварительного просмотра убедительно опрокидывается в экран. поверните ползунок перспективы обратно к нулю и наблюдайте, как то же вращение коллапсирует в плоский сквош. что до и после весь урок в двух перетаскиваниях.
Что делает трансформ-оригин?
Каждому вращению и каждой шкале нужна фиксированная точка для поворота, и эта точка является источником преобразования. По умолчанию он находится в мертвой точке элемента, поэтому не модифицированный rotate вращает коробку вокруг ее середины и немодифицированную scale выращивает его наружу во всех направлениях одновременно. Переместите происхождение, и оба поведения изменятся.
Установите начало координат top left и вращение становится качелями, элемент поворачивается из своего левого верхнего угла, как шарнирный знак. Установите это на bottom и а scaleY увеличивает элемент вверх от его основания, а не расширяет его симметрично, что именно то, что вы хотите для бара, который должен подняться от оси диаграммы. генератор предлагает все девять позиций ключевых слов, центр, четыре края и четыре угла, и обновляет предварительный просмотр в тот момент, когда вы выбираете один, поэтому разница между вращением и качелями находится на расстоянии одного щелчка друг от друга.
Это одно из тех свойств, которое почти невидимо, пока вам не понадобится, и тогда это единственное, что производит эффект, который вы после. меню, которое должно разворачиваться от его верхнего края, всплывающая подсказка, которая должна масштабироваться из элемента, которому она принадлежит, карта, которая должна вращаться вокруг угла, а не его середины, все они трансформ-происхождения, и ни один из них не очевиден из transform ценность одна.
Почему трансформация не толкает другие элементы?
Одно из наиболее полезных свойств transform также один человек находит наиболее удивительным первый раз, когда он кусает их. преобразованный элемент не влияет на макет вокруг него. когда вы переводите поле сорок пикселей вправо, он отображает сорок пикселей вправо, но он все еще оставляет свое исходное пространство в потоке документов, поэтому ничего больше не перемещается, чтобы заполнить пробел, и ничего не отталкивается. Трансформация - это эффект времени рисования, применяемый после того, как макет уже был вычислен.
Это особенность, а не ошибка, и именно она заставляет трансформировать правильный инструмент для анимации. Потому что перемещение элемента с transform не запускает повторный поток, браузер может скомпоновать изменение на графическом процессоре и сохранить анимацию на уровне шестидесяти кадров в секунду. Перемещение того же элемента с top или left или margin заставляет браузер перевычислять макет на каждом отдельном кадре, что является наиболее распространенной причиной анимации, которая заикается и отбрасывает кадры Если вы хотите плавного движения, вы оживляете transform а opacity, и вы оставляете свойства макета в покое. когда вам действительно нужно окружающее содержимое для повторного потока, это знак, вы хотите изменения макета, а не преобразования, и инструмент, как генератор flexbox или Генератор сетки CSS является правильным местом для начала.
Почему фиксированный ребенок сломался внутри моей преображенной стихии?
Это попа, которая выглядит как ошибка в чем-то несвязанном, и ее стоит знать, прежде чем она будет стоить вам час. В спецификации говорится, что любой элемент с a transform значение, отличное от none становится содержащим блоком для своих потомков, которые расположены fixed или absolute, и это также создает новый контекст стекинга. Оба они имеют последствия, которые всплывают далеко от самого преобразования.
Изменение containing-block - это то, что удивляет людей. а position: fixed элемент должен закрепиться на окне просмотра, оставаясь на месте, пока страница прокручивается. Но если какой-либо предок этого фиксированного элемента имеет преобразование, фиксированный элемент закрепляется на тот предок вместо этого, и внезапно ваш & quot;fixed& quot; заголовок прокручивается с содержимым или ваш модал заперт внутри карты. ничто в трансформе's внешний вид намекает на это; элемент выглядит нормально, и что-то три уровня вниз позиционирует себя неправильно. когда фиксированный или абсолютный элемент ведет себя так, как будто он заперт, первое, что нужно проверить, является ли предок несет преобразование. изменение контекста стекинга вызывает параллельный класс путаницы, где a z-index то, что раньше работало, внезапно не работает, потому что преобразованный элемент запечатал своих детей в их собственный слой штабелирования. Точно такое же поведение применимо и к filter собственность, поэтому Генератор фильтров CSS несет такое же предупреждение.
Какие функции охватывает генератор и когда вы к каждой из них обращаетесь?
Инструмент раскрывает полный набор общих функций преобразования, и он помогает узнать, для чего каждая из них предназначена, а не перетаскивать их наугад Вот карта.
| Функция | Что делает | Типичное использование |
|---|---|---|
translateX / translateY |
Перемещает элемент вдоль оси | Входы с выдвижным покрытием, подталкивания на зависании, смещенное позиционирование |
rotate |
Поворачивает элемент вокруг своего центра (2D) | Наклонные значки, крутящиеся погрузчики, игривые углы зависания |
scale (X и Y) |
Растет или сжимает элемент | Увеличение наведения, поп-эффекты, обратная связь при нажатии |
skewX / skewY |
Наклон ет элемент вдоль оси | Динамические баннеры, курсив, сигналы движения |
rotateX / rotateY |
Поворачивает элемент в 3D пространстве | Перевертывания карт, наклонные панели, эффекты потока покрытия |
perspective |
Добавляет глубину, чтобы 3D-вращения читались правильно | Всегда в паре с rotateX или rotateY |
Два, которые нуждаются в партнере, это 3D-ротации, которые не делают ничего убедительного без перспективы, и отрицательная шкала, которую стоит отметить, потому что она неочевидна. Настройка scaleX к отрицательному значению переворачивает элемент горизонтально, как зеркало, что и работает предварительный набор Flip Horizontal Это действительно полезный трюк, зеркальный отображение значка, а не экспорт второго актива, и он выпадает прямо из контроля масштаба, как только вы знаете, что отрицательные значения разрешены.
Как генератор сохраняет честность предварительного просмотра?
Режим сбоя любого визуального конструктора - это дрейф между тем, что показывает предварительный просмотр, и тем, что производит экспортированный код. инструмент, который отображает предварительный просмотр в одну сторону и пишет свой CSS в другую, хуже, чем отсутствие инструмента вообще, потому что он учит вас значению, которое не будет воспроизводиться. Этот генератор позволяет избежать этого, создав встроенный стиль предварительного просмотра & # 39;s и скопированное объявление из той же функции, поэтому то, что вы видите, буквально то, что вы вставляете. нет второго пути кода, который мог бы не согласиться.
Именно поэтому на выходе содержатся только те функции, которые вы изменили. оставляя scale по своей идентичности одного или rotate в нуле это означает, что эти функции просто отсутствуют в строке, а не записаны как избыточные scale(1) шум. Чистое преобразование - это преобразование, которое вы можете прочитать с первого взгляда и которому доверяете, а излучение только значимых функций - это та же дисциплина, на которую я полагаюсь во всех визуальных инструментах CSS, начиная с генератор градиента строителю тени коробки Если вы собираете более широкий комплект, то Набор инструментов для веб-разработчиков собирает те, которые я открываю чаще всего, и привычки, лежащие в основе их правильного использования, находятся в Инструменты повышения производительности разработчик гид.
Какие браузеры поддерживают преобразования CSS?
CSS-преобразования поддерживаются в каждом текущем браузере и существуют уже более десяти лет. 2D-функции, перевод, вращение, масштабирование и перекос, универсальны и непредопределены, а 3D-функции вместе с perspective одинаково хорошо поддерживаются в Chrome, Firefox, Safari и Edge. старый -webkit- а -moz- префиксы, которые когда-то были необходимы, сегодня мертвый вес в таблице стилей, и выход этого генератора стандартный, неперефиксированный CSS вы можете отправить как написано Для авторитетных правил спецификации модуля преобразования CSS уровня 1 и уровня 2 из W3C являются основными источниками, и их стоит прочитать, как только генератор дал вам интуицию следовать им.
Если вы создаете наряду с этим более широкий визуальный набор инструментов, генератор границы-радиуса и конструктор переходов являются естественными компаньонами, так как преобразование на ховере почти всегда хочет перехода, чтобы сгладить его. Здесь все работает на стороне клиента, и CSS, который вы копируете, вы можете использовать без среды выполнения, без шага сборки и без зависимости.
Часто задаваемые вопросы
Что такое генератор CSS-преобразований?
Генератор CSS-преобразований - это визуальный инструмент, который строит значение CSS-преобразования из выбранных вами настроек. Вы настраиваете перевод, вращение, масштабирование, перекос и трехмерную перспективу с помощью ползунков, и он выводит объявление преобразования вместе с предварительным просмотром результата в реальном времени.
Имеет ли значение порядок функций преобразования?
Да. функции применяются справа налево в системе координат элемента, поэтому перевод, затем поворот - это не то же самое, что поворот, а затем перевод. Перевод сначала перемещает элемент, а затем вращает его на месте; вращение сначала поворачивает оси, поэтому более поздний перевод отправляет его под углом.
Как сделать преобразование CSS трехмерным?
Трехмерное вращение нуждается в перспективе, чтобы читать как глубину Добавить перспективную () функцию в начале преобразования, которую этот генератор излучает, когда вы устанавливаете перспективный ползунок, или поставить перспективное свойство на родительский элемент Значения около 300 до 600 пикселей делают глубину наиболее драматичной.
Что делает трансформ-оригин?
трансформ-оригин устанавливает точку, вокруг которой поворачивается и масштабируется преобразование. По умолчанию - центр элемента. Переместите его в угол, и вращение станет качелем из этого угла; переместите его к краю, и масштабирование вырастет от этого края, а не наружу во всех направлениях.
Почему преобразование не перемещает другие элементы на странице?
Трансформация - это эффект времени рисования. элемент отображается в новом положении, но при этом сохраняет исходное поле в макете, поэтому ничего вокруг него не смещается. именно это делает трансформ идеальным для анимации и почему вы используете свойство поля, позиции или макета, когда вам действительно нужен контент для повторного потока.
Почему фиксированный или абсолютный ребенок ломается внутри преобразованного элемента?
Любой элемент с преобразованием, отличным от отсутствия, становится блоком, содержащим его фиксированных и абсолютно позиционированных потомков, и создает новый контекст стекинга. положение: фиксированный дочерний элемент затем закрепляется на преобразованном родительском элементе вместо окна просмотра, и может измениться порядок z-индекса. Выведите ребенка за пределы преобразованного элемента, если он должен оставаться фиксированным на экране.
Должен ли я анимировать трансформацию вместо верха, левого, ширины или высоты?
Да, для плавного движения. transform и opacity компонуются на графическом процессоре и не запускают компоновку, поэтому они анимируют со скоростью 60fps.Animating top, left, birid или highth заставляет браузер пересчитывать компоновку на каждом кадре, что является обычной причиной janky-анимации.
Является ли сгенерированное преобразование CSS бесплатным и безопасным в использовании?
Да. инструмент совершенно свободен без регистрации или ограничений использования, и он излучает стандартный, неперефиксированный CSS, поддерживаемый в каждом современном браузере. Вся обработка происходит в вашем браузере, поэтому ничего не загружается, и инструмент работает в автономном режиме после загрузки.
