Свойство CSS perspective-origin
Свойство perspective-origin определяет позицию, с которой пользователь смотрит на элемент, позиционированный в 3D-пространстве.
Свойство perspective-origin является одним из свойств CSS3.
Свойство perspective использует значение perspective-origin в качестве точки схода. По умолчанию точка схода 3D-пространства находится в центре. Свойство perspective-origin можно использовать для изменения положения точки схода.
Свойство perspective-origin должно использоваться вместе со свойством perspective на том же элементе или его предке, чтобы вступить в силу.
Если указано два или более значения, и ни одно из них не является ключевым словом, первое значение описывает горизонтальную позицию, а второе — вертикальную. Если определено только одно значение, второе по умолчанию считается центральным.
INFO
Перспективный вид получает только дочерний элемент, а не сам элемент.
| Начальное значение | 50% 50% |
|---|---|
| Применяется к | Элементы, подлежащие трансформации. |
| Наследуется | Нет. |
| Анимация | Да. Трансформация перспективы поддается анимации. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.perspectiveOrigin = "20px 70%"; |
Синтаксис
Синтаксис CSS perspective-origin
perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;Пример свойства perspective-origin:
Пример кода CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: 50% 50%;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: 50% 50%:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Результат
Пример свойства perspective-origin со значением "left":
Пример значения "left" для CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 20px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: left;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: left:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Пример свойства perspective-origin со значением "right":
Пример значения "right" для CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 160px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Пример свойства perspective-origin со значением "bottom right":
Пример значения "bottom" для CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: bottom right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: bottom right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| x-position | Указывает позицию вида по оси X. Может принимать следующие значения: - left (равно 0), - right (равно 100%), - center (равно 50%), - длина или процент. |
| y-position | Указывает позицию вида по оси Y. Может принимать следующие значения: - top (равно 0), - center (равно 50%), - bottom (равно 100%), - длина. |
| x | Устанавливает горизонтальную позицию в центр (50%). |
| y | Устанавливает вертикальную позицию в центр (50%). |
| closest-side | Устанавливает точку перспективы на ближайшую сторону элемента. |
| farthest-side | Устанавливает точку перспективы на дальнюю сторону элемента. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует это свойство от родительского элемента. |
Практика
В чем заключается функция свойства CSS 'perspective-origin'?