Главная/ Cправочник HTML, CSS, Javascript/ CSS справочник/ Свойства CSS для улучшения дизайна сайта/ 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;
    }


    Твой код:

    Результат: