Закрыть   X

  •    
  •    
Печать

perspective-origin

Автор: Алексей Елизаров.

CSS свойство perspective-origin

Поддержка браузеров

Описание

Свойство 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%

#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 */
}


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки