ES6 HTMLElement List

by amindunited

HTML

<div class="listWrap">
  <ul id="firstList">
    
  </ul>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.listWrap {
  width: 100%;
  overflow-y: scroll;
  height: 230px;
  white-space: nowrap;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px gray;
  height: 225px;
  overflow:hidden;
}

.modalContainer {
  background-color: rgba(233, 233, 233, .5);
  position: fixed;
  top: 0;
  left:0;
  right:0;
  bottom:0;
}
.clone {
  border: solid 2px yellow;
  position:absolute;
}
.cardContainer {
  width: 150px;
  height: 225px;
  position: absolute;
  transform-style: preserve-3d;
    
  transform-origin: -75px -117px;
  //transform: translateZ( -100px ) rotateX( -45deg ) rotateY( -45deg );
  animation:         swoosh 1.2s ease-in-out 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.cardContainer .box {
  width: 150px;
  height: 225px;
  position: absolute;
  transform-style: preserve-3d;
    
  transform-origin: 75px 117px; 
  //transform: translateZ( -100px ) rotateX( -45deg ) rotateY( -45deg );
  animation:         flip 1.2s ease-in-out 1;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.cardContainer .box .front  { background-color: rgba(256, 0, 0, .35); }
.cardContainer .box .back   { background-color: rgba(0, 256, 0, .35); }
.cardContainer .box .right  { background-color: rgba(0, 0, 256, .35); }
.cardContainer .box .left   { background-color: rgba(126, 0, 0, .35); }
.cardContainer .box .top    { background-color: rgba(0, 126, 0, .35); }
.cardContainer .box .bottom { background-color: rgba(0, 0, 126, .35); }

.cardContainer .box .face {
    display: block;
    position: absolute;
    border: 2px solid black;
}
.cardContainer .box .front, .cardContainer .box .back { width: 150px; height: 226px; }
.cardContainer .box .right,
.cardContainer .box .left { width: 2px; height:226px; left: 75px; }

.cardContainer .box .top,
.cardContainer .box .bottom { width: 150px; height: 2px; top: 50px; }

.cardContainer .box...

JavaScript

class ImageList {
	
	constructor (elm) {
  	console.log('ok then', elm);
    this.element = elm;
		this.numberOfElements = 10;
    this.createElements();
  }
  
  createElements () {
  	for (let i = 0; i < this.numberOfElements; i++) {
    	let li = document.createElement('li');
      let img = document.createElement('img');
      img.setAttribute('src', 'http://placehold.it/150x225');
      li.appendChild(img);
      this.element.appendChild(li);
    }
    this.element.addEventListener('click', (e) => { this.handleLiClick(e); });
  }
  
  handleLiClick (event) {
  	console.log('click event', event.target.offsetLeft);
    let target = event.target;
    this.cloneTarget(target);
  }
  
  cloneTarget (target) {
  	let container = document.createElement('div');
    let clone = target.cloneNode(true);
    let targetPosition = this.calculateDeepOffset(target);
    container.classList.add('modalContainer');
    container.addEventListener('click', (e) => { this.destroyModal(e); });
    let card = `<div class="cardContainer">
              <div class="box show-top">
                  <div class="face front">front</div>
                  <div class="face back">Back</div>
                  <div class="face left">L</div>
                  <div class="face right">R</div>
                  <div class="face top">Top</div>
                  <div class="face bottom">Bottom</div>
              </div>
          </div>`;
    container.innerHTML = card;
    clone.classList.add('clone');
    let body = document.querySelector('body');
    let listWrap = document.querySelector('.listWrap');
    let cloneContainer = container.querySelector('.cardContainer');
    let cloneFace = container.querySelector('.front');
		let scrollOffsets = {
    	top:0,
      left: 0
    };
    
    scrollOffsets.top = listWrap.scrollTop;
    scrollOffsets.left = listWrap.scrollLeft;
    targetPosition.top -= scrollOffsets.top;
    targetPosition.left -= scrollOffsets.left;
    
    cloneContainer.style.top =...