Свойство transform
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО TRANFORM

Свойство transform позволяет трансформировать элемент (масштабировать, вращать, смещать и наклонять).

Поддержка браузеров

10+

Синтаксис

transform: none|трансформация|initial|inherit

Значения свойства

Значение Описание
none Отменяет трансформацию.
matrix(n,n,n,n,n,n) Определяет двумерное преобразование, используя матрицу из шести значений.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Определяет трехмерное преобразование, используя матрицу 4x4 из 16 значений.
translate(x,y) Определяет двухмерное смещение.
translate3d(x,y,z) Определяет трёхмерное смещение.
translateX(x) Определяет смещение по оси Х.
translateY(y) Определяет смещение по оси У.
translateZ(z) Определяет трёхмерное смещение по оси Z.
scale(x,y) Определяет двухмерное масштабирование.
scale3d(x,y,z) Определяет трёхмерное масштабирование.
scaleX(x) Определяет масштабирование по оси Х.
scaleY(y) Определяет масштабирование по оси У.
scaleZ(z) Определяет масштабирование по оси Z.
rotate(angle) Определяет двухмерное вращение.
rotate3d(x,y,z,угол) Определяет трёхмерное вращение.
rotateX(угол) Определяет трёхмерное вращение по оси X.
rotateY(angle) Определяет трёхмерное вращение по оси Y.
rotateZ(angle) Определяет трёхмерное вращение по оси Z.
skew(x-угол,y-угол) Определяет двухмерный наклон по осям X и Y.
skewX(angle) Определяет двухмерный наклон по оси X.
skewY(angle) Определяет двухмерный наклон по оси Y.
perspective(n) Определяет перспективу для трёхмерного преобразования элемента.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="block"></div>
HTML
.block {
    background: blue;
    width: 150px;
    height: 150px;
    transform:translate(50px,50px)
}
CSS
← Перейти к списку свойств