Перспектива происхождения - CSS-хитрости

perspective-originСвойство определяет происхождение для perspectiveимущества. Думайте об этом как о точке схода текущего 3D-пространства.

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

perspective-originСвойство ничего не делает сам по себе. Он должен быть определен в элементе вместе с perspective.

/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin: 
 |  | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; )

Ниже приведена демонстрация, показывающая, как трехмерный куб ведет себя при изменении точки схода путем изменения perspective-originзначения (констант).

Посмотрите на эту ручку!

Эй, давайте анимируем начало перспективы, просто для удовольствия!

Посмотрите на эту ручку!

Он начинается с `0% 0%` (вверху слева)
Затем перейдите к «100% 0%» (вверху справа)
Затем до «100% 100%» (внизу справа)
Затем до «0% 100%» (внизу слева)
Затем вернитесь к 1. и перезапустите

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.