Leaflet Tilted Map

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

L.TiltedMap = L.Map.extend({
	getPixelBounds: function (center, zoom) {
		var topLeftPoint = this._getTopLeftPoint(center, zoom);
		var bounds = new L.Bounds(topLeftPoint, topLeftPoint.add(this.getSize()));
		console.log(bounds);
		return bounds;
	}
});

new L.TiltedMap('map', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    })
  ]
});

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

body {
  -webkit-perspective: 1200px;
  perspective:1200;
}

/* set up our 3D space */
#map,
#map * {
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}

#map {
  width:100%;
  height:100%;
  overflow:visible;
  transform: rotateX(60deg) rotateZ(40deg);
}

.marker{
  -webkit-transform:rotateX(-90deg) rotateY(40deg);
-moz-transform:rotateX(-90deg);
  -webkit-transform-origin:bottom center;
-moz-transform-origin:bottom center;
}

.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-objects-pane {
  transform: translateZ(2px);
}