<html>
<body>
  <section>
    <div class="face face-cover"></div>
    <div class="face face-spine"></div>
    <div class="face face-back"></div>
    <div class="face face-top"></div>
    <div class="face face-side"></div>
    <div class="face face-bottom"></div>
  </section>
</body>
</html>
body {
  background-color:#6769B5;
  perspective: 1500px;
  height: 100vh;
}

section {
  position:absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  
  }

div.face {
  position:absolute;
  top: 0;
  left: 0;
  background-size: cover;
}

div.face-cover {
  width: 300px;
  height: 480px;
  background-image:url('https://raw.githubusercontent.com/adskinner/portfolio/gh-pages/assets/img/writing/rotating-book/stationEleven.jpg'); 
 transform:translateX(-50%) translateY(-50%) translateZ(34px); 
}
div.face-side {
  width: 68px;
  height: 480px;
  background-image:url('https://allisondskinner.com/assets/img/writing/rotating-book/page-side.jpg'); 
 transform:translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(150px); 
}
div.face-spine {
  width: 68px;
  height: 480px;
  background-image:url('https://allisondskinner.com/assets/img/writing/rotating-book/spine.jpg'); 
 transform:translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(150px); 
}
div.face-top {
  width: 300px;
  height: 68px;
  background-image:url('https://allisondskinner.com/assets/img/writing/rotating-book/top-side.jpg'); 
 transform:translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(240px); 
}
div.face-bottom {
  width: 300px;
  height: 68px;
  background-image:url('https://allisondskinner.com/assets/img/writing/rotating-book/bottom-side.jpg'); 
 transform:translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(240px); 
}
div.face-back {
  width: 300px;
  height: 480px;
  background-image:url('https://allisondskinner.com/assets/img/writing/rotating-book/stationElevenBack.jpg'); 
 transform:translateX(-50%) translateY(-50%) rotateY(-180deg) translateZ(34px); 
}
document.addEventListener("mousemove", function(event) {
  const x = event.pageX
  const y = event.pageY
  
  const midX = x - window.innerWidth / 2
  const midY = y - window.innerHeight / 2 
  
  
  
  const box = document.querySelector("section")
  
  box.style.left = x + "px"
  box.style.top = y + "px"
  
  box.style.transform = "rotateX(" + (midY * 0.5) + "deg) rotateY(" + (midX * 0.5) + "deg)"
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.