使用透視圖創建一個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>