perspective-origin
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 36.0+ | 23.0+ | 9.0+ |
Описание
CSS свойство perspective-origin определяет, где располагается 3D элемент на осях x и y. Это свойство позволяет изменять нижнее положение 3D элементов.
При указании свойства perspective-origin для элемента, позиционируются именно его дочерние элементы, а не сам элемент.
Это свойство используется вместе со свойством perspective и воздействует только на трансформированные 3D элементы!
| Значение по умолчанию: | 50% 50% |
|---|---|
| Применяется: | к трансформируемым элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.perspectiveOrigin="10% 10%" |
Синтаксис
perspective-origin: x-ось y-ось|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| x-ось |
Определяет расположение на оси x Возможные значения:
|
| y-ось |
Определяет расположение на оси y Возможные значения:
|
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
perspective: 150px;
perspective-origin: 10% 10%;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<p>Пример свойства perspective-origin</p>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
Результат данного примера в окне браузера:
