Закрыть   X

  •    
  •    
Печать

transform-style

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

CSS свойство transform-style

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

Chrome и Safari поддерживают альтернативное свойство -webkit-transform-style.

Описание

Свойство transform-style определяет, как вложенные элементы будут отображаться в трехмерном пространстве.

Использование возможно только совместно со свойством transform.

Значение по умолчанию: flat
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transformStyle="preserve-3d"

Значения свойства

Значение Описание
flat Дочерние элементы не сохраняют свою позицию в пространстве.
preserve-3d Дочерние элементы сохраняют свою позицию в пространстве.

#div1{
position: relative;
height: 200px;
width: 200px;
margin: 30px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari и Chrome */
-webkit-transform-style: preserve-3d; /* Safari и Chrome */
}
#div3{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari и Chrome */
}


 


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