如何使用CSS 3D來顯示垂直於父元素的子元素？

想要的效果是讓2個垂直的dom元素像「彈出式」書一樣。然而，兒童元素似乎變平/投射到父母的飛機上。如何使用CSS 3D來顯示垂直於父元素的子元素？

它似乎工作，如果2個元素是兄弟姐妹。但是，我正在尋找一種方法來實現父/子元素。

<div class="container"> 
    <div class="parent" style="height:300px; width:300px;"> 
     <div class="child" style="height:100px; width:10px;"> 

     </div> 
    </div> 
</div> 

.container { 
    perspective: 1000; 
    -moz-perspective: 1000; 
    -webkit-perspective: 1000; 
} 

.parent { 
    transform:rotateX(60deg); 
    -moz-transform:rotateX(60deg); 
    -webkit-transform:rotateX(60deg); 
    background:grey; 
} 

.child { 
    transform:rotateX(-30deg); 
    -moz-transform:rotateX(-30deg); 
    -webkit-transform:rotateX(-30deg); 
    background:red; 
    margin: 100px; 
}

來源

2013-03-28 Max

-webkit-變換風格：保持-3D; 似乎是答案。但我仍然試圖讓它工作 – Max 2013-03-29 13:38:33

我已經找到了解決辦法。

.parent { 
    overflow: visible !important; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
}

解決一切

來源

2013-03-29 14:47:04 Max

我有一些修改，父母和子女元素

.parent:before, 
.parent:after { 
content: ".";  
display: block;  
height: 0;  
overflow: hidden; 
} 
.parent:after {clear: both;} 

.child { 
transform:rotate(-7deg); 
-moz-transform:rotate(-7deg); 
-webkit-transform:rotate(-7deg); 
background:red; 
margin: -60px 100px 100px 100px; 
}

在這裏你可以看到小提琴click here

來源

2013-03-28 11:59:04 Venugopal

如何使用CSS 3D來顯示垂直於父元素的子元素？

回答

相關問題