Генератор трансформации CSS

Генератор преобразований CSS является визуальным редактором для свойства преобразования CSS, Вы перемещаете ползунок для каждой функции преобразования - перевести, повернуть, масштабировать, перекос, и 3D функции rotateX, rotateY и перспектива - и наблюдаете эффект применимы к элементу предварительного просмотра в реальном времени, затем копировать точный CSS, который он производит, Он также позволяет установить преобразование-оригин, точка привязки каждое вращение и масштаб поворачивается вокруг.

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

Все происходит в вашем браузере.Начните с предустановленного типа, как Grow, Rotate, Flip или 3D Card, отладьте каждую функцию, и скопируйте объявление. инструмент записывает только функции, которые вы фактически изменили, поэтому вы никогда не отправляете избыточную шкалу (1) или вращать (0deg).Ни учетной записи, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Две детали экономят реальное время отладки Во-первых, 3D вращения выглядят только трехмерными, когда присутствует перспектива - либо перспективная () функция сначала в том же преобразовании, как этот инструмент излучает его, или свойство перспективы на родителе - в противном случае rotateY просто сжимает элемент плоским Во-вторых, любой элемент с преобразованием, отличным от отсутствия, становится блоком, содержащим его фиксированных и абсолютно позиционированных потомков и создает новый контекст стекирования, точно как свойство фильтра Положение: фиксированный ребенок внутри преобразованного родительских якорей к этому родителю, а не к виду просмотра, и z-индекс упорядочение, которое работало раньше, может измениться. Когда преобразование ломает макет таким образом, что не имеет ничего общего с тем, как он выглядит, это поведение, содержащее блок, почти всегда является причиной.