이미지 오버레이로 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-관점을 가지고있는 배경 이미지를 일치해야합니다.

내 배경 이미지와 완벽하게 일치하는 원근법을 만들려면 어떻게해야합니까? 정확히 말하면 : 내 그리드의 왼쪽 상단 모서리가 backgrgound의 경기 필드의 왼쪽 상단 모서리와 일치해야합니다. 그리드의 오른쪽 상단 모서리가 배경의 오른쪽 상단 모서리와 일치해야합니다.

CSS를 통해이 작업을 수행 할 수 있습니까? 아니면 원하는 이미지를 정확하게 얻을 수 있도록 이미지가 SVG이어야합니까?

Answer 1

나는 당신이 가지고있는 것과 같은 HTML 그리드와 정확히 일치하는 방법을 모르겠습니다 ... DIV의 그리드를 원한다면 가장 좋은 방법은 그리드 셀을 갖도록 행 너비를 재정의하는 것입니다 모두 필드 라인 안에 있어야합니다.

정확하게 이미지와 일치 시키려면 javascript를 참조하십시오. 드래그 앤 드롭 영역을 사용자 정의하고 플레이어의 필드 섹션을 계산하십시오.

그리고 Y 축을 사용하여 플레이어가 얼마나 멀리 있는지 확인하고 원근감에 맞게 크기를 조정하고 더 멀리 있다는 환상을 만들 수 있습니다.