Interactive Effect 1

by Marcel Ferdinand

HTML

<div class="wowpanel">
	<div class="content">1</div>
</div>
<div class="wowpanel">
	<div class="content">2</div>
</div>
<div class="wowpanel">
	<div class="content">3</div>
</div>
<div class="wowpanel">
	<div class="content">4</div>
</div>

CSS

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	color: white;
	font-family: sans-serif;
	font-size: 1.8em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	margin: 1px;
	width: 140px;
  border-radius:50%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

JavaScript

const ANGLE = 35;

let wowpanels = document.querySelectorAll(".wowpanel");
let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];

wowpanels.forEach((element, i) => {
	floatable(element, colors[i]);
});

function floatable (panel, color) {
	
	let content = panel.querySelector(".content");
	content.style.backgroundColor = color;
	
	panel.addEventListener('mouseout', e => {
		content.style.transform = `perspective(300px) 
								   rotateY(0deg)
								   rotateX(0deg)`;
	});
	
	panel.addEventListener('mousemove', e => {
		let w = panel.clientWidth;
		let h = panel.clientHeight;
		let y = (e.offsetX - w * 0.5) / w * ANGLE;
		let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

		content.style.transform = `perspective(300px) 
								   rotateX(${x}deg)
								   rotateY(${y}deg)`;
	});
	
}