Привнесение перспективы в CSS

На днях я начал изучать 3D в CSS и начал с игральной кости.
Кубик отлично выглядит в 3D. Однако у него нет перспективы, поэтому в 3D он по-прежнему двухмерный.

Давайте исправим это и добавим перспективу в 3D.

Если остановить вращение кубика и посмотреть на него спереди, то можно увидеть перекрытие, но все стороны одинаково большие.

Это немного странно, так как задняя панель должна быть меньше, поскольку она располагается больше сзади.

Перспектива CSS

Именно здесь может пригодиться стиль перспективы.

Давайте применим следующий стиль к тегу body:

body {
  perspective: 400px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Сумасшедшая разница, правда?

Вы можете поиграть со значением. Чем ниже значение, тем более интенсивным становится 3D.

Мы также получаем perspective-origin, который может определить, под каким углом вы смотрите на объект.

Значение по умолчанию 50% 50%, и мы можем использовать значения, известные нам из позиции, чтобы установить его.

body {
  perspective-origin: left;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это установит перспективу влево.

Как вы можете видеть, это становится немного странным, и вы можете сделать перспективу немного больше, чтобы получить правильное отображение.

Игра с перспективой может придать вашему 3D css ощущение нового уровня.

Не стесняйтесь играть с настроенными кубиками.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий