Свойство perspective-origin - это мощный инструмент, который позволяет точно управлять точкой перспективы. Оно определяет, где именно на осях x и y будет располагаться 3D-элемент, давая разработчику возможность гибко менять «взгляд» наблюдателя на сцену. Важно понимать нюанс: при применении этого свойства к конкретному элементу, оно влияет не на него самого, а исключительно на его дочерние элементы. Это критический момент для получения правильного визуального эффекта! Обратите внимание: perspective-origin работает в связке со свойством perspective и воздействует только на те 3D-элементы, которые претерпевают трансформации. Без этого оно останется неактивным. | Значение по умолчанию: | 50% 50% | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.perspectiveOrigin="10% 10%" | | Значение | Описание | | x-ось | Задаёт положение по горизонтальной оси. Допустимые значения: leftcenterright- конкретное расстояние (в любых единицах измерения, поддерживаемых CSS)
- %
Значение по умолчанию: 50% | | y-ось | Задаёт положение по вертикальной оси. Допустимые значения: topcenterbottom- конкретное расстояние (в любых единицах измерения, поддерживаемых 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
|