3D CSS: объемные эффекты и трансформации

Современные возможности 3D CSS позволяют создавать по-настоящему впечатляющие визуальные эффекты без использования JavaScript. Сегодня  такие технологии применяются не только в интерфейсах и карточках товаров, но и для создания объемных анимаций прямо в браузере. В этом материале разберем на примере, как с помощью CSS можно получить эффект вращения и глубины.

HTML структура

Начнем с простой HTML-разметки. Нам понадобятся два элемента, которые станут гранями куба, и родительский контейнер, отвечающий за перспективу и общее позиционирование:

<div class="blok-main">
    <div class="gran1"></div>
    <div class="gran2"></div>
</div>

Такой минимальный каркас станет основой для 3D объекта. Для полноценного куба нужно шесть граней, но для демонстрации 3D трансформации достаточно и двух.

CSS: создаем 3D эффект

Основная магия 3D визуализации заключается в свойствах perspective, transform-style и transform-origin. Именно они задают глубину, точку вращения и направление осей. Например, свойство perspective определяет, насколько выраженной будет глубина:

.blok-main {
    transform: perspective(900px);
}

Значение 900px означает, что перспектива будет умеренной: чем меньше число, тем сильнее эффект глубины.

Следующее свойство — transform-style. Оно сообщает браузеру, что дочерние элементы должны отображаться в трёхмерном пространстве:

.blok-main {
    transform-style: preserve-3d;
}

Чтобы контролировать точку вращения, можно использовать transform-origin. По умолчанию это центр элемента — 50% 50%, но при желании вы можете сместить точку влево, вправо или вверх.

Теперь создадим поворот по оси Y. Это даст эффект вращающегося куба:

.blok-main {
    transform: perspective(700px) rotate3d(0, 1, 0, -80deg);
}

Функция rotate3d() позволяет вращать элемент сразу по трём осям (X, Y, Z). Если вам нужно повернуть только по одной оси, используйте rotateY(), rotateX() или rotateZ().

Создание второй грани

Чтобы визуально завершить фигуру, добавим вторую грань и развернем её под углом 90 градусов:

.gran1, .gran2 {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #4e73df;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.gran2 {
    transform: rotate3d(0, 1, 0, 90deg);
}

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

Демонстрация

Ниже продемонстирован живой пример реализации:

Это демонстрация для ql89.lydo.life.

Заключение

3D CSS-трансформации — мощный инструмент для современных веб-дизайнеров. Они позволяют добавить глубину и интерактивность без тяжелых библиотек. А с правильным сочетанием perspective и rotate3d() можно добиться впечатляющих результатов, которые будут работать плавно даже на мобильных устройствах.