使用透视图创建一个CSS 3D场景的麻烦

Question

我想在CSS中创建一个3D场景，但我似乎无法让它按照我想要的方式工作。我试图制作的是一张包含一副牌的桌子。我的HTML看起来folows：（这里的“场景”格是表和“项”是扑克牌）

<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/

问题是该项目元素看起来不现实，就好像该透视图不正确。左边界是对角线，但应该是直的，使其看起来像一个真实的场景。如果更改场景类的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>