Генератор CSS Transform для ленивых.
Установите масштаб, вращайте, перемещайте и наклоняйте и смотрите предварительный просмотр в реальном времени, чтобы получить желаемый вид.
Избегайте установки экстремальных значений для свойства наклона, поскольку предварительный просмотр может закрывать панель настроек. В этой ситуации вам придется обновить страницу.
Масштабирование, поворот, преобразование и наклон
Масштабирование работает так же, как и при увеличении и уменьшении целевого элемента. Значение масштаба по умолчанию - 1, которое работает как множитель исходного размера. Это означает, что 0,5 уменьшает вдвое, а 2 - вдвое.
Поверните элемент по часовой стрелке, задав второе свойство в градусах. При повороте на 180 ° объект перевернется, а при повороте на 360 ° объект вернется в исходное вертикальное положение. Установите любое положительное или отрицательное значение или даже десятичные дроби.
Translate перемещает элемент с пикселями, относящимися к его исходному положению. Значение X по горизонтали, а Y по вертикали, когда атрибут поворота равен нулю.
Наклоняйте объекты по их горизонтальной (X) или вертикальной (Y) оси.
Объяснение преобразования CSS
Свойство CSS transform позволяет вращать, масштабировать, наклонять и переводить элемент. Он изменяет координатное пространство модели визуального форматирования CSS.
Определение и использование
Свойство transform применяет к элементу двухмерное или трехмерное преобразование. Это свойство позволяет вращать, масштабировать, перемещать, наклонять и т. Д. Элементы.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Синтаксис
transform: none|transform-functions|initial|inherit;