Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ Webkit/ Properties/ CSS свойство -webkit-perspective-origin | назначение, допустимые значения, примеры

Свойство -webkit-perspective-origin

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

Допустимые значения

  • — абсолютное значение расстояния от левого верхнего угла элемента до координат точки из которой зритель как бы смотрит на дочерние элементы
  • — расстояние от левого верхнего угла элемента до координат точки из которой зритель как бы смотрит на дочерние элементы в процентах от размера элемента (координата по оси x вычисляется в процентах от ширины элемента, а координата по оси y — от высоты)
  • left — координата по оси x равна 0 (точка зрения по оси x находиться на левой границе элемента)
  • right — координата по оси x равна 100% или ширине элемента (точка зрения по оси x находиться на правой границе элемента)
  • top— координата по оси y равна 0 (точка зрения по оси y находиться на верхней границе элемента)
  • bottom — координата по оси y равна 100% (точка зрения по оси y находиться на нижней границе элемента)
  • center — координата по оси x равна 50% (по оси x зритель как бы смотрит из центра элемента). Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси x равную 50%. Если эти константы отсутствуют, задает значение равное 50% по обеим осям
Значение по умолчанию 50% 50%
Применимо к блочным и строчным элементам
Наследование нет
Поддерживается браузерами
  • Safari 4.0.3/Mac OS X и выше, и с Safari 5/Win и выше

Пример

CSS

div {
width:100px;
height:50px;
-webkit-transform:rotate3d(0, 0, -1, 170deg) skale(1,5 3) skewX(15deg);
-webkit-perspective:600;
-webkit-perspective-origin:10px 20%;
}


Заметки

В спецификации CSS3 есть аналогичное свойство perspective-origin.

По теме

Теги: , , , ,
Показать комментарии