3-d трансформация, свойство perspective

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

Свойство perspective определяет, насколько далеко от пользователя находится плоскость просмотра для элементов, являющихся потомками элемента с этим свойством. Это создает ощущение глубины, как если бы мы смотрели на сцену с определенной точки обзора.

perspective: none | length;

none значение по умолчанию. Не применяется никакой перспективы
length расстояние от пользователя до плоскости Z в трехмерном пространстве. Чем меньше значение, тем более выражен эффект перспективы

Рассмотрим простой пример, где мы применяем perspective к контейнеру, чтобы создать трехмерный эффект для его дочерних элементов:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Example</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 50px;
            perspective: 500px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotateY(45deg);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

В этом примере контейнер .container имеет свойство perspective: 500px, что создает трехмерный эффект для вращающегося по оси Y блока .box.

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

perspective-origin()

Свойство perspective-origin определяет позицию точки обзора, из которой наблюдается перспектива. Оно задается аналогично свойству transform-origin и может принимать значения в процентах или пикселях.

.container {
    perspective: 500px;
    perspective-origin: 50% 50%;
}

transform-style()

Для корректного отображения перспективы важно использовать свойство transform-style: preserve-3d для дочерних элементов, чтобы они сохраняли свои трехмерные трансформации.

.container {
    perspective: 500px;
}

.box {
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
}

Сравнение различных значений perspective

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Comparison</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 50px;
            display: inline-block;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotateY(45deg);
            margin: 0 auto;
            transform-style: preserve-3d;
        }
    </style>
</head>
<body>
    <div class="container" style="perspective: 200px;">
        <div class="box"></div>
    </div>
    <div class="container" style="perspective: 500px;">
        <div class="box"></div>
    </div>
    <div class="container" style="perspective: 1000px;">
        <div class="box"></div>
    </div>
</body>
</html>