Параметр perspective-origin задаёт положение 3D-объекта относительно осей X и Y. Это ключевой момент, который позволяет придать вашему дизайну динамичность и глубину. Когда вы применяете этот атрибут к элементу, в действии оказываются именно его потомки – сам объект остаётся неподвижным, а изменения видны только внутри него. Он работает совместно с свойством 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% | Пример htmlhead 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/headbody pПример свойства perspective-origin/p div id="div1" div id="div2"HELLO/div /div/body/html
|