<div class="background">
  <div class="box steady">
  <p>x:&nbsp<p id="x">0,&nbsp</p>y:&nbsp<p id="y">0</p></p>
</div>
<div class="wrapper">
<div class="box box1" id="box1"></div>

<div class="box box2"></div>
<div class="box box3" id="3"></div>
<div class="box box4"></div>
</div>
</div>

body {
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}

.background {
  height:100vh;
  width:100vw;
  background: linear-gradient(to right bottom, #e4f9ff, #bbe1fa);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items:center;
}
.wrapper{
height:50vh;
  width:50vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items:center;
  transition: all .2s ease-out;
}
.box {
  width: 200px;
  height: 200px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-out;
}
.steady {
  width:130px;
  height:20px;
  position: absolute;
  z-index: 99;
  transform: translate(-40px,5px);
  background: #fa1616;
  opacity: .75;
  font-size:.5em;
  color: white;
  letter-spacing: .4em;
  text-align: center;
  vertical-align: top;
  box-shadow: 0 15px 15px rgba(0,0,0,0.2);
}
.box1 {
  position: absolute;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: translate(-100px,-90px);
  z-index: 1
}

.box2 {
  position: absolute;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: translate(30px,100px);
  z-index: 2
}

.box3 {
  position: absolute;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: translate(40px,-50px);
  z-index: 3
}

.box4 {
  position: absolute;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: translate(-120px,60px);
  z-index: 4
}

.box1:hover,.box2:hover,.box3:hover,.box4:hover {
  box-shadow: 0 30px 55px rgba(0,0,0,0.4), 0 20px 16px rgba(0,0,0,0.20);
  width: 205px;
  height: 205px;
}

@keyframes rotatenback3{
  
  30% {
    z-index: 4;
    transform: rotate(1turn);
    transform: translate(45px,-55px);
  }
  100% {
    transform: translate(40px,-50px);
    z-index: 3;
  }
}

@keyframes rotatenback2{
  
  30% {
    z-index: 2;
    
    transform: translate(35px,105px);
  }
  100% {
    transform: translate(30px,100px);
    z-index: 2;
  }
}

@keyframes rotatenback1{
  
  30% {
    z-index: 1;
    transform: rotate(1turn);
    transform: translate(-105px,-95px);
  }
  100% {
    transform: translate(-100px,-90px);
    z-index: 1;
  }
}

@keyframes rotatenback4{
  
  30% {
    z-index: 4;
    transform: rotate(1turn);
    transform: translate(-125px,65px);
  }
  100% {
    transform: translate(-120px,60px);
    z-index: 4;
  }
}

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var box4 = document.querySelector('.box4');
const style1 = window.getComputedStyle(document.querySelector('.box1'));
const matrix1 = new DOMMatrix(style1.transform);
const translateX1 = matrix1.m41;
const translateY1 = matrix1.m42;
const style2 = window.getComputedStyle(document.querySelector('.box2'));
const matrix2 = new DOMMatrix(style2.transform);
const translateX2 = matrix2.m41;
const translateY2 = matrix2.m42;
const style3 = window.getComputedStyle(document.querySelector('.box3'));
const matrix3 = new DOMMatrix(style3.transform);
const translateX3 = matrix3.m41;
const translateY3 = matrix3.m42;
const style4 = window.getComputedStyle(document.querySelector('.box4'));
const matrix4 = new DOMMatrix(style4.transform);
const translateX4 = matrix4.m41;
const translateY4 = matrix4.m42;

var boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
  box.addEventListener('mouseleave', function() {
  })
})

function getAbsPosition(element) {
	var abs={x:0,y:0};
	while(element!=document.body){
	   abs.x+=element.offsetLeft;
	   abs.y+=element.offsetTop;
	   element=element.offsetParent;
	   }

		abs.x += window.screenLeft +
	   document.body.clientLeft - document.body.scrollLeft;
		abs.y += window.screenTop +
	   document.body.clientTop - document.body.scrollTop;

  return abs;
}

function getCenterPosition(element){
	center={x:0,y:0}
	var leftTop = getAbsPosition(element)
	center.x =  leftTop.x + (element.style.getPropertyValue('width'))/2;
	center.y =  leftTop.y + (element.style.getPropertyValue('height'))/2;
	return center;
}

document.addEventListener('mousemove',(e) => {
	var stone = document.querySelector('.steady');
	var center = getCenterPosition(stone);
  document.getElementById("x").innerHTML = e.clientX + ' ,';
  document.getElementById("y").innerHTML = e.clientY;
  let moveX = (center.x - e.clientX)/30;
  let moveY = (center.y - e.clientY)/27;
  // console.log(center.x - e.clientX);
  // let str = 'rotateX('+moveX+'deg)'+''+'rotateY('+moveY+'deg)';
  // let str = 'translate(' + moveX + 'px,' + moveY + 'px)';
  // document.querySelector('.wrapper').style.transform = str;
  // var box1 = document.querySelector('.box1');
  let offsets = [moveX, moveY];
  getTranslate(offsets);
  // let resultX1 =  translateX1 + moveX;
  // let resultY1 = translateY1 + moveY;
  // let str1 = 'translate(' + resultX1 + 'px,' + resultY1 + 'px)';
  // box1.style.transform = str1;
  // var centerTest = getCenterPosition(box1);
  // console.log(centerOf1);
})

function getTranslate(offset) {
  var style = window.getComputedStyle(document.querySelector('.box1'));
  var matrix = new DOMMatrix(style.webkitTransform);
  let rst = getParam(offset[0]);
  console.log(rst);
  let resultX1 =  translateX1 + offset[0]*rst[0];
  let resultY1 = translateY1 + offset[1]*rst[0];
  let str1 = 'translate(' + resultX1 + 'px,' + resultY1 + 'px)';
  box1.style.transform = str1;
  let resultX2 =  translateX2 + offset[0]*rst[1];
  let resultY2 = translateY2 + offset[1]*rst[1];
  let str2 = 'translate(' + resultX2 + 'px,' + resultY2 + 'px)';
  box2.style.transform = str2;
  let resultX3 =  translateX3 + offset[0]*rst[2];
  let resultY3 = translateY3 + offset[1]*rst[2];
  let str3 = 'translate(' + resultX3 + 'px,' + resultY3 + 'px)';
  box3.style.transform = str3;
  let resultX4 =  translateX4 + offset[0]*rst[3];
  let resultY4 = translateY4 + offset[1]*rst[3];
  let str4 = 'translate(' + resultX4 + 'px,' + resultY4 + 'px)';
  box4.style.transform = str4;
  
  // console.log('translateX: ', matrix.m41);
  // console.log('translateY: ', matrix.m42);
}

function getParam(movex) {
  let rst = [];
  if(movex > 0) {
    rst = [1.7,1.4,1.5,2];
  } else {
    rst = [1.4,1.7,1.9,1.1];
  }
 return rst; 
}