CSS3 : div like a qube

Question

我想像这张图片一样创建 2 个 div

我已经为 div 1 尝试过这个，但它看起来不太好。你能帮帮我吗？

.div1 { 
-webkit-transform:perspective(2500px) rotate3d(1, 0, 0, 46deg);
-webkit-transform-origin:100% 0%;
-webkit-transform-style:preserve-3d;

}

Answer 1

transform-style:preserve-3d; 是嵌套 3D 转换元素并且想要创建逼真的 3D 外观时使用的东西(在这种情况下将其应用于父元素).你在这里不需要它。

你想要的效果其实很容易实现:

DEMO

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;
}