CSS网格与3D透视图像叠加

Question

我需要有一个足球场，我可以通过拖放放置球员。我通过引导网格定义了11个可放置区域，这样每个玩家都有一个可以放弃的预定义区域。 .field将附件图片作为背景。

<div class="field">
<div class="row" style="height: 25%">
<div class="col-xs-12">goalie</div>
</div>
<div class="row" style="height: 25%">
<div class="col-xs-4">defender</div>
<div class="col-xs-4">defender</div>
<div class="col-xs-4">defender</div>
</div>
<div class="row" style="height: 25%">
<div class="col-xs-3">midfielder</div>
<div class="col-xs-3">midfielder</div>
<div class="col-xs-3">midfielder</div>
<div class="col-xs-3">midfielder</div>
</div>
<div class="row" style="height: 25%">
<div class="col-xs-4">striker</div>
<div class="col-xs-4">striker</div>
<div class="col-xs-4">striker</div>
</div>
</div>

一切都像我想要的那样，但我的网格现在应该与背景图像相匹配，背景图像具有很好的3D视角。

如何创建与我的背景图像完美匹配的透视图？确切地说：我的网格的左上角应该与背景中的游戏区域的左上角匹配，网格的右上角应该与背景的右上角匹配，依此类推..

我可以通过CSS执行此操作，还是我的图像必须是SVG，以便我可以精确地获得所需的点？

Answer 1

我不知道如何使用像您拥有的HTML网格那样完全匹配... 如果你想要一个DIV网格，最好的办法是覆盖行宽，使网格单元格全部位于字段行内。

如果你想让它与图像完全匹配，我会参考javascript。 自定义拖放区域并计算玩家所在区域的哪个部分。

当你进入它时，你可以使用Y轴来确定你的球员的位置有多远，并调整它们的大小以匹配视角并创造他们离得更远的错觉。