javascript - Creating a map with inclined view without using WebGL? -

i want create map viewer, views map angle. obvious how create it, if angle 90 degrees (like in google maps). however, want angle less 90 , without using webgl. this:

maybe there solutions, hacks , tricks using css or canvas? thanks!

used javascript navigation buttons , window edges. requires configuration screen display: find commends beginning adjust

var mapwidth = -4500 + 900, // #adjust: same #second width      mapheight = -2234 + 600, // #adjust: same #second height      $map;    function movescreen(dx, dy) {    var positionx = $map.css("backgroundpositionx"),        positiony = $map.css("backgroundpositiony");      positionx = parseint(positionx.substring(0, positionx.length - 2)) + dx;    positiony = parseint(positiony.substring(0, positiony.length - 2)) + dy;      if (positionx < mapwidth) {      positionx = mapwidth;    }    if (positionx > 0) {      positionx = 0;    }    if (positiony < mapheight) {      positiony = mapheight;    }    if (positiony > 0) {      positiony = 0;    }      $map.css("backgroundpositionx", positionx + "px");    $map.css("backgroundpositiony", positiony + "px");  }    $(document).ready(function(){    $map = $("#second");      var moverleft = null, moverup = null, moverright = null, moverdown = null;    var clearmover = function(code) {      if (code == 37) {        clearinterval(moverleft);        moverleft = null;      }      if (code == 38) {        clearinterval(moverup);        moverup = null;      }      if (code == 39) {        clearinterval(moverright);        moverright = null;      }      if (code == 40) {        clearinterval(moverdown);        moverdown = null;      }    }    var movescreentop = function(){      if (moverup == null) {        moverup = setinterval(function(){ movescreen(0, 10)}, 10);      }    };    var movescreenbottom = function(){      if (moverdown == null) {        moverdown = setinterval(function(){ movescreen(0, -10) }, 10);      }    };    var movescreenleft = function(){      if (moverleft == null) {        moverleft = setinterval(function(){ movescreen(10, 0) }, 10);      }    };    var movescreenright = function(){      if (moverright == null) {        moverright = setinterval(function(){ movescreen(-10, 0) }, 10);      }    };    $("#button_top").hover(movescreentop, function(){clearmover(38);});    $("#button_bottom").hover(movescreenbottom, function(){clearmover(40);});    $("#button_left").hover(movescreenleft, function(){clearmover(37);});    $("#button_right").hover(movescreenright, function(){clearmover(39);});    $("#button_left_top").hover(function(){movescreenleft(); movescreentop();}, function(){clearmover(37);clearmover(38)});    $("#button_right_top").hover(function(){movescreenright(); movescreentop();}, function(){clearmover(39);clearmover(38)});    $("#button_right_bottom").hover(function(){movescreenright(); movescreenbottom();}, function(){clearmover(39);clearmover(40)});    $("#button_left_bottom").hover(function(){movescreenleft(); movescreenbottom();}, function(){clearmover(37);clearmover(40)});    $(document).keyup(function(e){      clearmover(e.which);    });    $(document).keydown(function(e){      if (e.which == 37) {        movescreenleft();      }      if (e.which == 38) {        movescreentop();      }      if (e.which == 39) {        movescreenright();      }      if (e.which == 40) {        movescreenbottom();      }    });  });

body {    margin: 0;    overflow: hidden;  }    #first {          /* adjust perspective screen */          -moz-perspective: 600px;          -moz-perspective-origin: 50%;          -webkit-perspective: 600px;          -webkit-perspective-origin: 50%;          perspective: 600px;          perspective-origin: 50%;          width: 100%;          height: 100%;      }        #second {          margin: 0 auto;          /* adjust width , height screen */          width: 900px;          height: 600px;          background: url("http://img2.wikia.nocookie.net/__cb20131223222429/althistory/images/archive/b/bb/20140706210315!world_map_(ranjit_singh_lives).png") 0px 0px;            /* adjust translatez screen */          -moz-transform-style: preserve-3d;          -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;          -webkit-transform: translatez(260px) rotatex( 20deg );          -moz-transform: translatez(260px) rotatex( 20deg );          transform: translatez(260px) rotatex( 20deg );      }    .button_edge, .button_corner {    opacity: 0.1;    background-color: #999999;    position: fixed;  }    #button_top {    height: 30px;    left: 30px;    right: 30px;    top: 0px;  }    #button_bottom {    height: 30px;    left: 30px;    right: 30px;    bottom: 0px;  }    #button_left {    width: 30px;    left: 0px;    top: 30px;    bottom: 30px;  }    #button_right {    width: 30px;    right: 0px;    top: 30px;    bottom: 30px;  }      .button_corner {    width: 30px;    height: 30px;  }    #button_left_top {    left: 0px;    top: 0px;  }    #button_right_top {    right: 0px;    top: 0px;  }    #button_right_bottom {    right: 0px;    bottom: 0px;  }    #button_left_bottom {    left: 0px;    bottom: 0px;  }  .tip {    opacity: 0.9;    color: white;    background-color: #666666;    padding: 10px;    font-size: 14px;    width: 200px;    position: fixed;    left: 45%;    bottom: 50px;  }  .tip:hover {opacity: 0.2;}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>    <div id="first">    <div id="second"></div>  </div>  <div class="button_edge" id="button_top"></div>  <div class="button_edge" id="button_bottom"></div>  <div class="button_edge" id="button_left"></div>  <div class="button_edge" id="button_right"></div>  <div class="button_corner" id="button_left_top"></div>  <div class="button_corner" id="button_right_top"></div>  <div class="button_corner" id="button_right_bottom"></div>  <div class="button_corner" id="button_left_bottom"></div>  <div class="tip">use arrow buttons or mouse navigation</div>

p.s.: of course not final version: needs adjust user's screen automatically, current version).