jivo banner 468x60jivo banner 728x90jivo banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

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 поддерживается во всех основных браузерах.

kwork banner 480x320kwork banner 728x90kwork banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600

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

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

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

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

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

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента