Узнайте, как создать трехмерное пространство в CSS. Добавьте глубины своим макетам, используя свойство перспективы.
По умолчанию преобразования CSS происходят в двумерном пространстве. Чтобы переключиться в трехмерное пространство, все, что вам нужно, это свойство перспективы:
.parent {
perspective: 1500px; // 👈 create a 3D space
}
.child {
transform: translateZ(20px) rotateX(20deg); // 👈 transform the element
}
Свойство перспективы необходимо применить к родительскому элементу, который нужно преобразовать. Чем ниже значение перспективы, тем выше искажение.
Вот демонстрация:
Вот и всё!
Ссылка на автора - twitter.com/guerriero_se !
