Трансформация, функция CSS transform

Функции CSS-трансформации позволяют разработчикам создавать удивительные визуальные эффекты, искажая реальность в пределах веб-страницы. С их помощью можно поворачивать, изменять масштаб, перемещать и искажать элементы, добавляя интерактивности и динамичности.

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

Основные функции трансформации

translate() перемещает элемент по осям X и Y

translate(x, y) перемещает элемент на x пикселей по горизонтали и на y пикселей по вертикали.

.translate {
transform: translate(50px, 100px);
}

rotate() поворачивает элемент вокруг точки происхождения

rotate(angle) поворачивает элемент на угол angle (в градусах).

.rotate {
transform: rotate(45deg);
}

scale() изменяет масштаб элемента по осям X и Y

scale(x, y) масштабирует элемент по горизонтали на x и по вертикали на y.

.scale {
transform: scale(1.5, 0.5);
}

skew () искажает элемент по осям X и Y

skew(x-angle, y-angle) искажает элемент на угол x-angle по оси X и y-angle по оси Y.

.skew {
transform: skew(30deg, 20deg);
}

Комбинирование функций трансформации

Функции CSS-трансформации можно комбинировать для создания сложных эффектов. Например, вы можете одновременно применить поворот и масштабирование:

.combined {
    transform: rotate(45deg) scale(1.5);
}

Пример использования

Рассмотрим пример, в котором мы применяем различные функции трансформации к нескольким элементам:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transform Functions Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
            display: inline-block;
        }

        .translate {
            transform: translate(50px, 50px);
        }

        .rotate {
            transform: rotate(45deg);
        }

        .scale {
            transform: scale(1.5);
        }

        .skew {
            transform: skew(20deg);
        }

        .combined {
            transform: translate(30px, 30px) rotate(30deg) scale(0.8) skew(10deg, 15deg);
        }
    </style>
</head>
<body>
    <div class="box translate"></div>
    <div class="box rotate"></div>
    <div class="box scale"></div>
    <div class="box skew"></div>
    <div class="box combined"></div>
</body>
</html>

В этом примере у нас есть пять квадратов, каждый из которых демонстрирует разные функции трансформации.

Пример трехмерной трансформации

.threeD {
    transform: rotateX(45deg) rotateY(45deg);
    perspective: 500px;
}

Перспектива

Функция perspective используется для задания глубины трехмерного пространства. Она задает расстояние от зрителя до элемента.

.perspective {
    perspective: 1000px;
}

Пример с трехмерной перспективой

Рассмотрим пример с использованием перспективы и трехмерного поворота:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Transform Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px;
            display: inline-block;
            transform-style: preserve-3d;
        }

        .rotate3d {
            transform: rotateX(45deg) rotateY(45deg);
            perspective: 1000px;
        }
    </style>
</head>
<body>
    <div class="box rotate3d"></div>
</body>
</html>

В этом примере элемент поворачивается по осям X и Y, создавая эффект трехмерного вращения с перспективой.