Свойство perspective-origin определяет, где располагается 3D элемент на осях x и y. Это свойство позволяет изменять нижнее положение 3D элементов.
При указании свойства perspective-origin для элемента, позиционируются именно его дочерние элементы, а не сам элемент.
Это свойство используется вместе со свойством perspective и воздействует только на трансформированные 3D элементы!
| Значение по умолчанию: |
50% 50% |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.perspectiveOrigin="10% 10%" |
| Значение |
Описание |
| x-ось |
Определяет расположение на оси x
Возможные значения:
- left
- center
- right
- расстояние (указывается в единицах измерения, поддерживающихся CSS)
- %
Значение по умолчанию: 50%
|
| y-ось |
Определяет расположение на оси y
Возможные значения:
- top
- center
- bottom
- расстояние (указывается в единицах измерения, поддерживающихся CSS)
- %
Значение по умолчанию: 50%
|
Пример
html
head
style type="text/css"
#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 */
}
/style
/head
body
pПример свойства perspective-origin/p
div id="div1"
div id="div2"HELLO/div
/div
/body
/html
|