具有3D視角的CSS網格作爲圖像疊加

我需要一個足球場，我可以通過拖放放置球員。我通過bootstrap網格定義了11個可放置區域，這樣每個玩家都有一個預定義的區域，可以放置它。 .field有附件圖像作爲背景。具有3D視角的CSS網格作爲圖像疊加

<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，所以我可以精確地得到所需的點？

來源

2016-09-23 ManuKaracho

我認爲一個簡單而有效的方法是通過改變玩家的大小，例如，如果玩家在屏幕的底部是100px高，那麼取決於玩家在Y軸上的位置在頂部它的高度是33xp，如果它位於中心，則高度爲66px – Grey

我不知道如何實現這個完全匹配的HTML網格，如你有一個... 如果你想要一個網格的DIV的最好的選擇將是覆蓋行寬，使網格單元格都在田野裏。

如果你想要它與圖像完全匹配，我會參考javascript。自定義拖放區域並計算您的球員在球場的哪一部分。

當你處於這種狀態時，你可以使用Y軸來確定你的球員的位置有多遠，並調整他們的大小以符合視角，並創造他們距離更遠的錯覺。

來源

2016-09-23 09:06:25 JasperZelf

具有3D視角的CSS網格作爲圖像疊加

回答

相關問題