3d上的深度比例錯誤

Question

我為“跳棋”制作了游戲板。 我想在其軸（rotateX）上旋轉一點。 給它一個“ 120度”旋轉后，我注意到深度是不成比例的。 所有正方形均具有相同的大小，而距離較近的正方形看起來更大。 我究竟做錯了什么？

這是我的代碼： https : //jsfiddle.net/w3bow2Lc/

 //init board var counter = 0; for (var i = 0; i < 8; i++) { var tr = $('<tr/>'); for (var j = 0; j < 8; j++) { var td = $('<td/>').attr('class', 'square').attr('id', counter); if (i % 2 == 0) $(td).addClass('even'); else $(td).addClass('odd'); tr.append(td); counter++; } $('#board').append(tr); } //init white soldiers //var soldier = '<svg height="40" width="40" class="soldier" draggable="true"><circle cx="20" cy="20" r="14" fill="white" stroke="black" stroke-width="1" ></circle></svg>'; var soldier = '<div class="soldier white" draggable="true"></div>'; var squares = $('#board td'); for (var i = 0; i < 24; i++) { if ($(squares[i]).hasClass('even') && i % 2 == 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); if ($(squares[i]).hasClass('odd') && i % 2 != 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); } //init black soldiers //var soldier = '<svg height="40" width="40" class="soldier" draggable="true"><circle cx="20" cy="20" r="14" fill="black" stroke="white" stroke-width="1" ></circle></svg>'; var soldier = '<div class="soldier black" draggable="true"></div>'; var squares = $('#board td'); for (var i = 40; i < 64; i++) { if ($(squares[i]).hasClass('even') && i % 2 == 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); if ($(squares[i]).hasClass('odd') && i % 2 != 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); } 

 #board { margin: 50px 100px; //border:15px solid gray; transform-style: preserve-3d; position: absolute; transform: rotateX(120deg); } #board td { <!-- outline: 2px solid white; --> padding: 0; } .square { width: 40px; height: 40px; padding: 0; outline: 1px solid white; } .even:nth-child(2n+1) { background-color: brown; } .even:nth-child(2n+2) { background-color: BlanchedAlmond; } .odd:nth-child(2n+1) { background-color: BlanchedAlmond; } .odd:nth-child(2n+2) { background-color: brown; } .soldier { cursor: pointer; width: 30px; height: 30px; border-radius: 25px; margin: auto; } .white { background-color: white; border: 1px solid black; } .black { background-color: black; border: 1px solid white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='board'></table> 

Answer 1

您需要向父元素添加透視圖。 在這種情況下，只需向主體添加800px的透視圖。 （最好將電路板包裹在一個新元素中，並將其應用於該元素）

body{
    perspective:800px;
}

您還需要從transform: rotateX(120deg);更改transform: rotateX(120deg); transform: rotateX(-120deg);

這里的工作示例

https://jsfiddle.net/Jcoulterdesign/Lfwewzcn/2/

您可以調整透視圖的數量和旋轉角度，直到獲得所需的精確外觀為止，但這將解決深度問題。

Answer 2

要定義3d空間，您需要設置perspective屬性：

#board {
  margin: 50px 100px;
  transform-style: preserve-3d;
  position: absolute;
  transform: perspective(600px) rotateX(120deg);
}

這是更新的JSFiddle 。

您可以將值視為觀看者與對象之間的距離-值越大，透視效果就越微妙。 這是更詳細的資源，解釋了如何使用此屬性以及perspective-origin屬性。 希望這可以幫助！