如何使用CSS3D显示垂直于父元素的子元素？
如何使用CSS3D显示垂直于父元素的子元素？
提问于 2013-03-28 18:25:36
想要的效果是有两个垂直的dom元素，就像一本弹出的书。但是，子元素似乎被展平/投影到父元素的平面上。
如果这两个元素是兄弟元素，则似乎可以工作。然而，我正在寻找一种方法来实现父/子元素的这一点。
<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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-29 22:47:04
我已经找到解决方案了。
.parent {
overflow: visible !important;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}解决了所有问题
Stack Overflow用户
发布于 2013-03-28 19:59:04
我对父元素和子元素进行了一些修改
.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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15679381
复制相关文章
相似问题
腾讯云开发者
