perspective-origin
CSS свойство perspective-origin
Поддержка браузеров
Описание
Свойство perspective-origin определяет, где располагается 3D элемент на осях x и y. Это свойство позволяет изменять нижнее положение 3D элементов.
При указании свойства perspective-origin для элемента, позиционируются именно его дочерние элементы, а не сам элемент.
Это свойство используется вместе со свойством perspective и воздействует только на трансформированные 3D элементы!
Значение по умолчанию: | 50% 50% |
---|---|
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.perspectiveOrigin="10% 10%" |
Значения свойства
Значение | Описание |
---|---|
x-ось |
Определяет расположение на оси x Возможные значения:
|
y-ось |
Определяет расположение на оси y Возможные значения:
|
#div1{ position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; perspective:150; perspective-origin: 10% 10%; -webkit-perspective:150; /* Safari и Chrome */ -webkit-perspective-origin: 10% 10%; /* Safari и Chrome */ } #div2{ padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); /* Safari and Chrome */ }