html - 使用 css 透视属性创建矩形 3d 框

Question

我需要得到与图像中相同的矩形框。我尝试了这个 w3c 代码并尝试了一下。仍然无法按照我想要的方式得到它。请帮忙提出一些建议。 enter image description here

#div1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin: 50px;
  padding: 10px;
  border: 1px solid black;
  -webkit-perspective: 150px;
  /* Chrome, Safari, Opera */
  -webkit-perspective-origin: 10% 10%;
  /* Chrome, Safari, Opera */
  perspective: 150px;
  perspective-origin: 15% 10%;
}

#div2 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: blue;
  -webkit-transform: rotateX(45deg);
  /* Chrome, Safari, Opera */
  transform: rotateX(25deg);
}

<div id="div1">
  <div id="div2">sample</div>
</div>

Answer 1

这是您要找的吗？

body {
  background: #F4F7FA;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px;
}

.parent {
  width: 200px;
  height: 200px;
  position: absolue;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.child {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.15);
  -webkit-transform: rotateX(1deg) rotateY(9deg);
  transform: rotateX(1deg) rotateY(22deg);
}

<div class="center">
  <div class="parent">
    <div class="child"></div>
  </div>
<div>