Свойство -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% |
|---|---|
| Применимо | к блочным и строчным элементам |
| Наследование | нет |
| Поддерживается браузерами |
|
Пример
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.
По теме
- Вендорные префиксы. Что это?
- CSS свойство transform
- CSS свойство -moz-transform
- CSS свойство -o-transform
- CSS свойство -webkit-transform
- CSS свойство transform-origin
- CSS свойство -o-transform-origin
- CSS свойство -moz-transform-origin
- CSS свойство -webkit-transform-origin-x
- CSS свойство -webkit-transform-origin-y
- CSS свойство -webkit-transform-origin-z
- CSS свойство perspective
- CSS свойство -webkit-perspective
- CSS свойство transform-style
- CSS свойство -webkit-transform-style
- CSS свойство backface-visibility
- CSS свойство -webkit-backface-visibility
Показать комментарии