【问题标题】：CSS3: div like a qubeCSS3：像 qube 一样的 div
【发布时间】：2013-03-05 01:06:36
【问题描述】：
我想创建 2 个像这张图片一样的 div
我已经为 div 1 尝试过这个，但它看起来不太好。你能帮帮我吗？
.div1 {
-webkit-transform:perspective(2500px) rotate3d(1, 0, 0, 46deg);
-webkit-transform-origin:100% 0%;
-webkit-transform-style:preserve-3d;
}
【问题讨论】：
标签：
css
webkit
css-transitions
【解决方案1】：
transform-style:preserve-3d; 是您在嵌套了 3D 转换元素并且想要创建逼真的 3D 外观（在这种情况下将其应用于父元素）时使用的东西。你在这里不需要它。
你想要的效果其实实现起来真的很简单：
HTML：
<div class='parent'>
<div class='div1'>div1</div>
<div class='div2'>div2</div>
</div>
相关CSS：
.parent { perspective: 20em; }
.div1 {
transform: rotateX(30deg);
transform-origin: 0 100% 0;
}