3Dパースペクティブをイメージオーバーレイとして使用するCSSグリッド

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軸を使用して、プレーヤーの位置をどれだけ戻しているかを判断し、その視点に合わせてサイズを調整し、離れているという幻想を作り出すことができます。