3d上的深度比例错误

Wrong depth proportion on 3d

本文关键字：错误 深度 3d      更新时间：2023-09-26

我为"跳棋"制作了一个游戏板。我想在它的轴上旋转一点（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>

要定义三维空间，需要设置perspective属性：

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

这是一个更新的JSFiddle。

你可以把这个值想象成观众离物体有多远——这个值越大，透视效果就越微妙。下面是一个更详细的资源，解释如何使用此属性以及perspective-origin属性。希望这能有所帮助！

您需要向父元素添加一个透视图。在这种情况下，只需在正文中添加一个800px的透视图。（最好是用一个新的元素包裹木板，并将视角应用于此）

body{
    perspective:800px;
}

您还需要将转换从transform: rotateX(120deg);更改为transform: rotateX(-120deg);

此处的工作示例

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

你可以调整透视量和旋转，直到你得到你想要的确切外观，但这将解决深度问题。

相关文章：