html - 具有 3D 透视图的 CSS 网格作为图像叠加

Question

我需要一个足球场，我可以通过拖放来放置球员。我通过 Bootstrap 网格定义了 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。 自定义拖放区域并计算您的球员在 field 的哪个部分。

当您这样做时，您可以使用 Y 轴确定玩家的位置，并调整他们的大小以匹配视角并创造他们离得更远的错觉。