3D map CSS3

3d-map-css3.markdown

3D map CSS3

Another experiment with a 3D folded map. Using google map API and CSS3

A Pen by Blanchon on CodePen.

License.

index.html

<div id="go3D">
<div id="container">
  <div class="top">
    <div class="map_canvas"></div>
  </div>
<div class="middle">
    <div class="map_canvas"></div>
  </div>
  <div class="bottom">
    <div class="map_canvas"></div>
  </div>
</div>
</div>

script.js

/*Weirdness, the map doesn't appeared in full view*/

  function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(45.7640430, 4.8356590),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var containers = document.getElementsByClassName('map_canvas');
    var maps = [new google.maps.Map(containers[0],mapOptions),
                new google.maps.Map(containers[1],mapOptions),
                new google.maps.Map(containers[2],mapOptions)
   ];
      return maps;
  }
  var myMap = initialize();
  var go3D = document.getElementById("go3D");
  go3D.onmousedown=function(e){
    if(e.which==1 && myMap[0].getZoom()+1 <= 20){
      for(var i in myMap){
        myMap[i].setZoom(myMap[i].getZoom()+1);
      }
    }
    else if(e.which==3 && myMap[0].getZoom()-1 > 1){
     for(var i in myMap){
        myMap[i].setZoom(myMap[i].getZoom()-1);
      }
    }
    return false;
 };

scripts

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVE7BWWYfdZZ17452BwkaUPeBowp1qAUg&amp;sensor=true"></script>

style.css

* {
  margin:0;
  padding:0;
}
html { 
  height: 100%;
  background:#424242;
}
body { 
  height: 100%;
}
.map_canvas { 
  width:400px;
  height:400px;
  position:absolute;
}

.top,.bottom,.middle{
 overflow:hidden;
  height:133px;
  width:400px;
}
.middle .map_canvas{
  margin-top:-133px;
}
.bottom .map_canvas{
  margin-top:-266px;
}

#container{
  position:relative;
  width:400px;
  height:400px;
    -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
   -webkit-transform: rotateY(35deg) rotateX(-35deg);
  -moz-transform:rotateY(35deg) rotateX(-35deg);
  transform: rotateY(35deg) rotateX(-35deg);
    -webkit-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
}

.top{
  -webkit-transform-origin:bottom;
  -moz-transform-origin:bottom;
  transform-origin:bottom;
  -webkit-transform: rotateX(90deg);
  -moz-transform:rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
  border-top:10px solid #ffffff;
  border-right:10px solid #ffffff;
  border-left:10px solid #ffffff;
}

.bottom{
  -webkit-transform-origin:top;
  -moz-transform-origin:top;
  transform-origin:top;
  -webkit-transform: rotateX(90deg);
  -moz-transform:rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
    border-bottom:10px solid #ffffff;
  border-right:10px solid #ffffff;
  border-left:10px solid #ffffff;
}

.middle{
  -webkit-transform-origin:top;
  -moz-transform-origin:top;
  transform-origin:top;
  -webkit-transform: rotateX(0deg);
  -moz-transform:rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
  border-right:10px solid #ffffff;
  border-left:10px solid #ffffff;
}

#go3D{
  width:400px;
  height:400px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-200px;
}

#go3D:hover .top,#go3D:hover .middle,#go3D:hover .bottom{
  -webkit-transform: rotateX(0deg);
  -moz-transform:rotateX(0deg);
  transform: rotateX(0deg);
}

#go3D:hover #container{
  -webkit-transform: rotateY(0deg) rotateX(0deg);
  -moz-transform:rotateY(0deg) rotateX(0deg);
  transform: rotateY(0deg) rotateX(0deg);
}

#go3D::before{
  content:"Toulouse →";
  position:absolute;
  z-index:1;
  font:3em Arial,sans-serif;
  left:-88%;
  top:40%;
}

#go3D::after{
  content:"";
  position:absolute;
  z-index:1;
  font:1.5em Arial,sans-serif;
  left:110%;
  width:250px;
  top:40%;
}

#go3D:hover::before,#go3D:hover::after{
  visibility:hidden;
  display:none;
}