css3d總結

看風景就發表於2016-03-16
CSSS33D

3d舞臺 設定 perspective(景深): length, 可以設定overflow:hidden

3d舞臺下 -> 3d元素容器  設定 transform-style: preserve-3d,不可設定 overflow: hidden(其如同transform-style:flat;)　　　　　　 

隱藏後背元素 backface-visibility: hidden;

transform-style: preserve-3d 隻影響這個元素的子元素，孫子元素無效，即3d元素的父元素必須設定該屬性

perspective: length 僅作用於元素的後代，而不是其元素本身

<div class="container">
    <div class="stage">
    </div>
</div>
.container{
     perspective: 1000px;
     -webkit-perspective: 1000px;
}
.stage{
    transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
}

 

相關文章