使用透视

Question

我正在尝试在css中创建一个3d场景，但我似乎无法按照我想要的方式工作。我想要制作的是一张包含一副纸牌的桌子。我的HTML看起来如下:(这里的'scene'div是表格，'item'是卡片组）

<div class="scene-wrap">
  <div class="scene">

    <div class="item">
      <div class="item__right">
      </div>
      <div class="item__front">
      </div>
      <div class="item__top">
      </div>
    </div>

  </div>
</div>

该项目缺少左侧和后侧，但此时并不重要。我在这里做了一个小提琴，用CSS：https://jsfiddle.net/do76ro22/

问题是item元素看起来不真实，就好像透视不正确一样。左边框是对角线但应该是直的，以使其看起来像一个真实的场景。如果更改场景类的rotateX值，则可以更好地看到它。

有谁知道如何使这看起来更逼真？

Answer 1

可能你正在寻找的财产是

perspective-origin: left center;

我添加了一点左侧定位，以便它不会崩溃

.scene-wrap {
  width: 800px;
  height: 400px;
  position: relative;
  top: 100px;
  left: 100px;
  background: yellow;
  perspective: 800px;
  perspective-origin: left center;
}

.scene {
  width: 100%;
  height: 100%;
  background: green;
  transform-style: preserve-3d;
  transform: rotateX(50deg);
  position: absolute;
}

.item {
  width: 200px;
  height: 300px;
  background: red;
  position: relative;
  transform-style: preserve-3d;
  left: 5px
}

.item__right {
  height: 100%;
  width: 100px;
  position: absolute;
  top: 0;
  left: 100%;
  background: blue;
  transform: rotateY(-90deg);
  transform-origin: left center;
}

.item__front {
  height: 100px;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: lightblue;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.item__top {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: darkblue;
  transform: translateZ(100px);
}

<div class="scene-wrap">
  <div class="scene">
    <div class="item">
      <div class="item__right">
      </div>
      <div class="item__front">
      </div>
      <div class="item__top">
      </div>
    </div>
  </div>
</div>