Edit on
<div class="placeholder">
  <div id="css-element"></div>
</div>
<div class="mask"></div>
<div class="result">
  <aside class="aside">
    <div class="aside-inner">
      <div class="aside-inner-block">
        <p>Local country</p>
        <div class="data data--local"></div>
      </div>
      <div class="aside-inner-block">
        <p>On Map</p>
        <div class="data data--map"></div>
      </div>
    </div>
  </aside>
</div>
<p class="controls">
  <label>Fold map 
    <input id="range" type="range" min="350" max="500" value="500" step="1" />
  </label>
</p>
<p class="info">Fold effect only supported by Firefox</p>
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font: 1em 'Montserrat', sans-serif;
  background: #f0f0fa;
}
#css-element {
  width: 500px;
  height: 350px;
  border: none;
  box-shadow: 0 3px 2px rgba(0,0,0,.5);
}
.face{
  position: relative;
  display: inline-block;
  height: 100%;
  perspective: 500px;
  perspective-origin: 0% 70%;
}
.face:nth-child(odd) {
  perspective-origin: 100% 70%;
}
.face div {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  transform-origin: top right;
}
.face:nth-child(odd) div {
  right: auto;
  left: 0;
  transform-origin: top left;
}
.face span {
  position: absolute;
  width: 100%; height: 100%;  
}
.face--even span {
    background: black;
    background: linear-gradient( 
                   to right, 
                   transparent 0%, 
                   rgba(0,0,0,.6) 90%, 
                   black),
                   rgba(0,0,0,.5);
    opacity: 0;
}
.face--odd div span {
    background: none;
    background: linear-gradient(
                   to left, 
                   transparent 50%, 
                   rgba(0,0,0,.4) 90%, 
                   black);
    opacity: 0;
}
.face--odd:first-child div span {
    background: none;
}

.placeholder {
  position: absolute;
  z-index: 0;
  left: 0; right: 0;
  width: 500px;
  margin: 100px auto;
}

.aside {
  display: none;
}

@supports (background: -moz-element(#id)) {
  .mask {
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0; left: 0; right: 0;
    background: #f0f0fa;
    pointer-events: none;
  }
  .result {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    z-index: 2;
    width: 500px;
    height: 350px;
    margin: 100px auto;
    background: rgba(255,255,255,.4);
    background-clip: content-box;
    pointer-events: none;
  }
  .result::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0px;
    border: 5px dashed rgba(0,0,0,.4);
  }
  .wrapper {
    position: absolute;
    z-index: 3;
    width: 500px;
    height: 350px;
    /*filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));*/
    box-shadow: 0 3px 2px rgba(0,0,0,.5);
  }
  .aside {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0; bottom: 0; right: 0;
    overflow: hidden;
    width: 0;
    pointer-events: auto;
  }
  .aside-inner {
    position: absolute;
    overflow: auto;
    top: 5px; bottom: 5px; right: -20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 170px;
    padding: 0 30px 0 10px;
    color: rgba(0,0,0,.6);
    font-size: .8em;
    text-align: right;
  }
  .aside-inner-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}



.data {
  font-size: 1.6em;
  word-spacing: -.1em; 
  color: #111;
  overflow: hidden;
}

.controls {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  width: 500px;
  margin: 470px auto;
  text-align: center;
  pointer-events: auto;
}
.controls * {
  vertical-align: middle;
}
.info {
  position: relative;
  z-index: 2;
  text-align: center;
  color: rgba(0,0,0,.3);
}
.info a {
  color: inherit;
}
var createMap = function (id) {
  var aside = document.querySelector('.aside');
  var map = L.map(id).setView([48.85, 2.35], 5);
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				 'Imagery © <a href="https://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiaWFtdmRvIiwiYSI6IkI1NGhfYXMifQ.2FD2Px_Fh2gAZCFTxdrL7g'
  }).addTo(map);
  function handleMove () {
    var center = map.getCenter();
    var ajax = new XMLHttpRequest();
    ajax.open('POST', 'http://api.geonames.org/findNearbyPlaceNameJSON', true);
    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    ajax.addEventListener('readystatechange',  function(e) {
      if(ajax.readyState == 4 && ajax.status == 200) {
        handleResult(ajax.responseText);
      }
    });
    var data = "lat=" + center.lat + "&lng=" + center.lng + "&username=iamvdo";
    ajax.send(data);
  }
  function handleResult (data) {
    data = JSON.parse(data);
    var country = aside.querySelector('.data--map').innerHTML;
    if (data.geonames !== undefined) {
      if (data.geonames.length === 0) {
        country = '-';
      } else if (data.geonames[0].countryName !== undefined) {
        country = data.geonames[0].countryName;
      }
    }
    aside.querySelector('.data--local').innerHTML = 'France';
    aside.querySelector('.data--map').innerHTML = country;
  }
  map.on('moveend', handleMove);
  handleMove();
};

var Accordion = function (nb) {
  var nbElems = nb * 2;
  var result = document.querySelector('.result');
  var wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  result.appendChild(wrapper);
  wrapper = document.querySelector('.wrapper');
  var aside = document.querySelector('.aside');
  var asideInner = document.querySelector('.aside-inner');
  var range = document.getElementById('range');
  var min = range.getAttribute('min');
  var max = range.getAttribute('max');
  var delta = max - min;
  var widthInit = wrapper.clientWidth;
  var widthFace = widthInit / nbElems;
  var widthFaceInit = widthFace;

  for( var i = 0; i < nbElems; i++){
    var el = document.createElement('div');
    el.className = 'face';
    if (i%2 === 0) {
      el.className += ' face--odd';
    } else {
      el.className += ' face--even';
    }
    el.innerHTML = '<div><span></span></div>'; 
    var bgPos = i * widthFace + 'px';
    el.style.width = 100 / nbElems + '%';
    el.querySelector('div').style.width = widthFace + 'px';
    el.querySelector('div').style.backgroundImage = '-moz-element(#css-element)';
    el.querySelector('div').style.backgroundPosition = '-' + bgPos + ' 0';
    wrapper.appendChild(el);
  }

  var faces = {
    odd: document.querySelectorAll('.face--odd'),
    even: document.querySelectorAll('.face--even'),
    all: function () {
      return [].slice.call(this.odd).concat([].slice.call(this.even));
    }
  };

  function handleInput (e) {
    var value = range.value;
    wrapper.style.width = value + 'px';
    aside.style.width = result.clientWidth - wrapper.clientWidth + 'px';
    widthFace = value / nbElems;
    var angle = Math.acos(widthFace / widthFaceInit) * 180 / Math.PI;
    [].forEach.call(faces.odd, function (el) {
      el.querySelector('div').style.transform = 'rotateY(-' + angle + 'deg)';
    });
    [].forEach.call(faces.even, function (el) {
      el.querySelector('div').style.transform = 'rotateY(' + angle + 'deg)';
    });
  
    var width = value - min;
    var opacity = (width / 1000) / (delta / 1000);
    opacity = 1 - opacity;
    [].forEach.call(faces.all(), function (el) {
      el.querySelector('span').style.opacity = opacity;
    });
  }

  range.addEventListener('input', handleInput);
  handleInput();
};

createMap('css-element');
Accordion(4);
Rerun