Достижение наклона с помощью преобразования CSS: наклон обеих сторон

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

Применение наклона перспективы:

Чтобы добавить перспективу, используйте следующее свойство CSS:

transform: perspective(distance) rotateY(angle);

Замените «расстояние» значением, чтобы установить перспективное расстояние (более высокие значения создают более дальнюю перспективу). Замените «угол» на желаемый угол поворота (в данном случае 45 градусов).

Пример CSS:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

HTML-код:

Чтобы применить наклон к элементу, добавьте следующий класс:

Пример из внешнего ресурса:

Предоставленный код CSS и HTML взят из http://desandro.github.com/3dtransforms/docs /perspective.html. На этом веб-сайте представлены дополнительные примеры и документация по использованию перспективных преобразований.