3D перспектива - трехмерное пространство в CSS

Узнайте, как создать трехмерное пространство в CSS. Добавьте глубины своим макетам, используя свойство перспективы.

ДЕМО

По умолчанию преобразования CSS происходят в двумерном пространстве. Чтобы переключиться в трехмерное пространство, все, что вам нужно, это свойство перспективы:


.parent {
  perspective: 1500px; // 👈 create a 3D space
}

.child {
  transform: translateZ(20px) rotateX(20deg); // 👈 transform the element
}

Свойство перспективы необходимо применить к родительскому элементу, который нужно преобразовать. Чем ниже значение перспективы, тем выше искажение.

Вот демонстрация:

Вот и всё!


🔖 Выбор по тегам ×

Top