Свойство 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
Читайте также
Свойство writing-mode
Устанавливает направление текста на странице — по горизонтали или вертикали.
Свойство border-width
Устанавливает толщину границы элемента.
Свойство background-position-y
Задаёт начальное положение фонового изображения по оси Y, установленного с помощью свойства backg...
Свойство flex-flow
Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.
Свойство column-gap
Задаёт расстояние между колонками в многоколоночном тексте.