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

Значение по умолчанию: 50% 50%
Применяется к: Трансформируемые элементы
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

perspective-origin: [ x-position y-position ] | initial | inherit

Если для свойства perspective-origin указано только одно значение, предполагается, что второе значение будет center, что равно значению 50%.

Примеры написания кода свойства perspective-origin:

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    perspective-origin: 20% top;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}

Если хотя бы одно из двух значений не является ключевым словом, то первое значение представляет горизонтальную позицию (или смещение), а второе значение представляет вертикальную позицию (или смещение) исходного положения.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
x-position

Представляет горизонтальное положение (или смещение) исходного положения. Может принимать одно из следующих значений:

  • percentage — Определяет процентное смещение относительно ширины элемента;
  • length — Определяет точное значение смещения относительно ширины элемента;
  • left — Равно 0% ширины, самая левая точка элемента;
  • center — Равно 50% ширины, центральная точка элемента;
  • right — Равно 100% ширины, самая правая точка элемента.
y-position

Представляет вертикальную позицию (или смещение) исходного положения. Может принимать одно из следующих значений:

  • percentage — Определяет процентное смещение относительно высоты элемента;
  • length — Определяет точное значение смещения относительно высоты элемента;
  • top — Равно 0% высоты, самая верхняя точка элемента;
  • center — Равно 50% высоты, середина элемента;
  • bottom — Равно 100% высоты, самая нижняя точка элемента.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента perspective-origin.

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

Свойство perspective-origin поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.