仅使用CSS（例如Mario Kart / Mode 7）将2D坐标映射到3D平面？

Question

我正在尝试将2D元素添加到“ 3D”平面上。我已经将元素（卡丁车）添加到了应该去的地方（红色方块）。当您使用滑块平移并更改角度时，红色方块会正确移动（因为它位于使用css倾斜的同一div中）

我的意图是使卡丁车的缩放比例类似于红场。我希望可以直接使用css来进行此操作，也可以利用css来确定红场的大小和坐标以放置2D卡丁车。

我确实找到了getBoundingClientRect，但我不知道如何成功使用其中的值。

有什么想法吗？

var kart = {
  x: 130,
  y: 513,
  angle: 0
};

var viewport = {
  width: 512,
  height: 174
};


var redraw = function() {
  var translate = {
    x: -(kart.x - (viewport.width / 2)),
    y: -(kart.y - (viewport.height / 2))
  };
  translate.y += 60; // Move focus of camera

  var style = "transform: ";
  style += "translate(" + translate.x + "px, " + translate.y + "px) ";
  style += "rotateX(76deg) ";
  style += "rotateZ(" + kart.angle + "deg) ";

  style += "scaleX(2.5) scaleY(2.5);"; // Attempt to get sizing closer to original
  style += "transform-origin: " + kart.x + "px " + kart.y + "px;"

  $("#inner").attr("style", style);

  var kartPositionOffset = $("#kartposition").offset();
  var viewportOffset = $("#viewport").offset();

  var rect = $("#kartposition")[0].getBoundingClientRect();
  //var height = rect.height;

  var height = 32,
    width = 32; // These need to be dynamically changed

  var x = (kartPositionOffset.left - viewportOffset.left);
  var y = (kartPositionOffset.top - viewportOffset.top);

  $("#kart").css({
    left: x + "px",
    top: y + "px",
    height: height + "px",
    width: width + "px"
  });
};


$(document).ready(function() {
  var $viewport = $("#viewport");

  $viewport.css({
    width: viewport.width + "px",
    height: viewport.height + "px"
  });

  $("#kartposition").css({
    left: (kart.x - 8) + "px",
    top: (kart.y - 8) + "px"
  });

  redraw();

  var onSlide = function(event, ui) {
    var index = $(this).data("index");
    kart[index] = ui.value;
    redraw();
  };

  $("#vertical").slider({
    slide: onSlide,
    max: 1024,
    value: kart.y
  });

  $("#horizontal").slider({
    slide: onSlide,
    max: 1024,
    value: kart.x
  });

  $("#angle").slider({
    slide: onSlide,
    min: -360,
    max: 360,
    value: kart.angle
  });
});

#kart {
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  background-image: url('https://i.stack.imgur.com/ga8Cl.png');
  left: 256px;
  top: 35px;
  z-index: 100000;
  background-repeat: no-repeat;
  background-size: cover;
}

#kartposition
{
  background:red;width:16px;height:16px;position:absolute;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="viewport" style="perspective: 256px;overflow:hidden;position:relative;">
  <div id="inner">
    <div id="kartposition"></div>
    <img src="https://i.stack.imgur.com/NuZJa.png">
  </div>

  <div id="kart">
  </div>
</div>

<table style="width:400px;">
<tr><td style="width:1%">X</td><td><div id="horizontal" data-index="x"></div></td></tr>
<tr><td>Y</td><td><div id="vertical" data-index="y"></div></td></tr>
<tr><td>Angle</td><td><div id="angle" data-index="angle"></div></td></tr>
</table>