3D Real Glassmorphism, Vanilla-tilt

https://micku7zu.github.io/vanilla-tilt.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library 

Vanilla-tilt.js

 

사용법 

<div class="box">
	<div class="elements bg"></div>
	<div class="elements text"></div>
	<div class="card"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js" integrity="sha512-RX/OFugt/bkgwRQg4B22KYE79dQhwaPp2IZaA/YyU3GMo/qY7GrXkiG6Dvvwnds6/DefCfwPTgCXnaC6nAgVYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	VanillaTilt.init(document.querySelector(".box"), {
		max: 25,
		speed: 400,
		glare: true
	});
</script>

 

CSS

.elements { position: absolute; top:50px; left:-30px; width: 100px; height: 100px;
	background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.5);
	transform: translateZ(60px); 
	backdrop-filter: blur(10px);
	box-shadow: 0 25px 45px rgba(0,0,0,0.05);}
.elements.bg::before { content: ''; position: absolute; inset: 0;}
.elements.text { transform: translateZ(80px); right:50px;left:inherit;
	width: 100px; height: 80px;top:150px; }