Planes with depth of field effect

Click inside viewport to toggle planes back and forth into focus.

by phloe

HTML

<div style="background-color: #9e259e;">
	<h3>Purple</h3>
</div>
<div style="background-color: #1aa58c;">
	<h3>Green</h3>
</div>
<div style="background-color: #2a68ca;">
	<h3>Blue</h3>
</div>

CSS

* {
	padding: 0;
	margin: 0;
}
html {
	perspective: 1000px;
	perspective-origin: 50% 50%;
	font: 400 100%/1.25 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
	user-select: none;
}

html, body {
	height: 100%;
}

body {
	background-color: #FFF;
  transform-style: preserve-3d;
}

div {
	min-height: 200px;
	width: 200px;
	position: absolute;
	top: 50%;
	margin-top: -100px;
	left: 50%;
	margin-left: -100px;
	transition: transform .3s ease-in-out,
		filter .3s ease-in-out,
		opacity .3s ease-in-out;
	opacity: 0.999; /* avoid flicker in chrome :/ */
	background-color: #666;
}

/* imitate fog with transparent white layer */
div:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	opacity: 0;
	transition: opacity .3s ease-in-out;
  pointer-events: none;
}

div h3 {
	padding: 10px;
	color: #FFF;
} 

.z2 {
	transform: rotateY(10deg) translate3d(0, 0, 400px);
	filter: blur(10px);
	opacity: .1;
	z-index: 4;
	pointer-events: none;
}

.z1 {
	transform: rotateY(5deg) translate3d(0, 0, 200px);
	filter: blur(5px);
	opacity: .2;
	z-index: 3;
	pointer-events: none;
}

.z0 {
	z-index: 2;
}

.z-1 {
	transform: rotateY(-5deg) translate3d(0, 0, -200px);
	filter: blur(5px);
	opacity: 0.999;
	z-index: 1;
	pointer-events: none;
}

.z-1:after {
	opacity: .3333333;
}

.z-2 {
	transform: rotateY(-10deg) translate3d(0, 0, -400px);
	filter: blur(10px);
	opacity: 0.999;
	z-index: 0;
	pointer-events: none;
}
.z-2:after {
	opacity: .6666666;
}

JavaScript

var focus = null;
var focusInc = 1;
var root = document.documentElement;
var divs = [...document.querySelectorAll("div")];
root.addEventListener("mousemove", function (event) {
	root.style.perspectiveOrigin = `${event.pageX}px ${event.pageY}px`;
});

root.addEventListener("click", toggleFocus);

function toggleFocus () {
	var index = focus + focusInc;
	if (index === 0 || index === divs.length - 1) {
		focusInc *= -1;
	}
	setFocus(index);
}

function setFocus (index) {
	focus = index;
	divs.forEach((div, index) => div.className = `z${focus - index}`);
}

setFocus(1);