Notice: Use of undefined constant w3419t - assumed 'w3419t' in /home/clients/ftp0/domains/mpbox.ru/html/index.php on line 1
CSS свойство perspective-origin | назначение, допустимые значения, примеры 

Свойство perspective-origin

Последнее обновление: 29.12.2010

Свойство perspective-origin применяется при трансформациях элемента, задает точку отсчета для 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%
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

div {
width:100px;
height:50px;
transform:rotate(45deg) skale(1,5 3) skewX(15deg);
transform-style:preserve-3d;
perspective:30;
perspective-origin: right top;
}
Твой код:
Результат:
большой полигон

Заметки

Safаri 5 и выше поддерживает аналогичное свойство -webkit-perspective-origin

По теме

Показать комментарии