<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)"
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.