Генератор преобразований CSS3: масштабирование, поворот, преобразование и наклон

CSS3.0 Transform

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