Свойство transform

Описание

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.

Синтаксис

transform: функция | none;
Значение Описание
none Отменяет действие трансформации.
matrix Задаёт двумерную матрицу преобразований.
matrix3d Задаёт трёхмерную матрицу преобразований.
rotate() Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
rotateX() Поворачивает элемент на заданный угол относительно оси X.
rotateY() Поворачивает элемент на заданный угол относительно оси Y.
rotateZ() Поворачивает элемент на заданный угол относительно оси Z.
rotate3d Поворачивает элемент в трёхмерном пространстве.
scale() Масштабирует элемент по горизонтали и вертикали.
scaleX() Масштабирует элемент по горизонтали.
scaleY() Масштабирует элемент по вертикали.
scaleZ() Масштабирует элемент по оси Z.
scale3d Масштабирует элемент в трёхмерном пространстве.
skew() Наклоняет элемент на заданный угол по горизонтали и вертикали.
skewX() Наклоняет элемент на заданный угол по горизонтали.
skewY() Наклоняет элемент на заданный угол по вертикали.
translate() Сдвигает элемент на заданное значение по горизонтали и вертикали.
translateX() Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
translateY() Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
translateZ() Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.
translate3d Сдвигает элемент на заданное значение в трёхмерном пространстве.
perspective() Задаёт перспективу.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .test-content {
 display: flex;
 flex-wrap: wrap;
 }
 .test {
 width: 100px;
 height: 100px;
 margin: 10px;
 text-align: center;
 cursor: pointer;
 background-color: rgb(99, 42, 165);
 transition: all 0.5s;
 }
 .test > span {
 color: white;
 font-family: Arial, Helvetica, sans-serif;
 position: relative;
 top: 40px;
 }
 .matrix:hover {
 transform: matrix(1.2, 0, 0, 1, 0, 0);
 }
 .matrix3d:hover {
 transform: matrix3d(
 0.5,
 0,
 -0.866025,
 0,
 0.595877,
 1.2,
 -1.03209,
 0,
 0.866025,
 0,
 0.5,
 0,
 25.9808,
 0,
 15,
 1
 );
 }
 .rotate:hover {
 transform: rotate(45deg);
 }
 .rotateX:hover {
 transform: rotateX(45deg);
 }
 .rotateY:hover {
 transform: rotateY(45deg);
 }
 .rotateZ:hover {
 transform: rotateZ(45deg);
 }
 .rotate3d:hover {
 /* transform: rotate3d(X, Y, Z, deg); */
 transform: rotate3d(1, 1, 1, 45deg);
 }
 .scale:hover {
 transform: scale(1.3);
 }
 .scaleX:hover {
 transform: scaleX(1.3);
 }
 .scaleY:hover {
 transform: scaleY(1.3);
 }
 .scaleZ:hover {
 transform: perspective(400px) scaleZ(1.5) translateZ(-50px);
 }
 .scale3d:hover {
 transform: scale3d(-1, 1, 1);
 }
 .translate:hover {
 transform: translate(25px, 20px);
 }
 .translateX:hover {
 transform: translateX(10px);
 }
 .translateY:hover {
 transform: translateY(15px);
 }
 .translateZ:hover {
 transform: perspective(400px) rotateY(15deg) translateZ(30px);
 }
 .translate3d:hover {
 transform: translate3d(10px, 20px, 0);
 }
 .skew:hover {
 transform: skew(20deg, 10deg);
 }
 .skewX:hover {
 transform: skewX(10deg);
 }
 .skewY:hover {
 transform: skewY(10deg);
 }
 .perspective:hover {
 transform: perspective(300px) rotateZ(25deg);
 }
 </style>
 <div class='test-content'>
 <div class='test matrix'><span>matrix</span></div>
 <div class='test matrix3d'><span>matrix3d</span></div>
 <div class='test rotate'><span>rotate</span></div>
 <div class='test rotateX'><span>rotateX</span></div>
 <div class='test rotateY'><span>rotateY</span></div>
 <div class='test rotateZ'><span>rotateZ</span></div>
 <div class='test rotate3d'><span>rotate3d</span></div>
 <div class='test scale'><span>scale</span></div>
 <div class='test scaleX'><span>scaleX</span></div>
 <div class='test scaleY'><span>scaleY</span></div>
 <div class='test scaleZ'><span>scaleZ</span></div>
 <div class='test scale3d'><span>scale3d</span></div>
 <div class='test skew'><span>skew</span></div>
 <div class='test skewX'><span>skewX</span></div>
 <div class='test skewY'><span>skewY</span></div>
 <div class='test translate'><span>translate</span></div>
 <div class='test translateX'><span>translateX</span></div>
 <div class='test translateY'><span>translateY</span></div>
 <div class='test translateZ'><span>translateZ</span></div>
 <div class='test translate3d'><span>translate3d</span></div>
 <div class='test perspective'><span>perspective</span></div>
 </div>
</body>
</html>
matrix
matrix3d
rotate
rotateX
rotateY
rotateZ
rotate3d
scale
scaleX
scaleY
scaleZ
scale3d
skew
skewX
skewY
translate
translateX
translateY
translateZ
translate3d
perspective

Читайте также