css - CSS3：像 qube 一样的 div

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 外观时使用的东西（在这种情况下，您将其应用于父元素）。你在这里不需要它。

你想要的效果其实很简单实现：

演示

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