Трансформация – это эффект, который позволяет элементу изменять форму, размер и положение.
Трансформации CSS позволяют сдвигать, поворачивать, масштабировать и изгибать элементы.
В CSS существуют 2- и 3-мерные трансформации.
Трансформация – это эффект, который позволяет элементу изменять форму, размер и положение.
Трансформации CSS позволяют сдвигать, поворачивать, масштабировать и изгибать элементы.
В CSS существуют 2- и 3-мерные трансформации.
transform: translate(50px, 100px);
transform: translateX(-50px);
transform: translateY(-5rem);
перемещает элемент из своего текущего положения (в соответствии с параметрами, заданными для оси x и оси y).
transform: rotate(20deg);
transform: rotate(180deg);
transform: rotate(90deg);
поворачивает элемент по часовой стрелке или против неё в соответствии с заданным значением
transform: scale(2, 2);
transform: scale(2);
transform: scale(1.5, 2);
transform: scale(.5);
увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты)
transform: skewX(20deg);
transform: skewX(-20deg);
transform: skewX(90deg);
растягивет элемент вдоль оси х на заданный угол
transform: skewY(20deg);
transform: skewY(-20deg);
transform: skewY(90deg);
растягивает элемент вдоль оси у на заданный угол
transform-origin: 50% 50%;
transform-origin: 0 0;
transform-origin: 100% 100%;
позволяет изменять положение точку опоры трансформации
transform: scale(.9);
transform: scale(.9) rotateY(45deg);
transform: scale(.9) rotateY(45deg) skewX(25deg);
Чтобы 3d стало действительно 3d, нужно использовать свойство perspective для контейнера трансформируемого элемента либо в свойстве transform самого элемента. Оно определяет, насколько далеко объект находится от нас.
perspective: 500px;
transform: translate3d(50px, 100px, 150px);
transform: translateX(50px);
transform: translateY(100px);
transform: translateZ(-5rem);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: perspective(500px) rotateX(45deg);
transform: perspective(500px) rotateY(45deg);
transform: perspective(500px) rotateZ(45deg);
perspective: 500px;
transform: perspective(500px);