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属性。 希望这可以帮助！