css - CSS3: キューブのような 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;
}