All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Ratating Image Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<span style="--i:1;"><img src="img1.jpg"></span>
<span style="--i:2;"><img src="img2.jpg"></span>
<span style="--i:3;"><img src="img3.jpg"></span>
<span style="--i:4;"><img src="img4.jpg"></span>
<span style="--i:5;"><img src="img5.jpg"></span>
<span style="--i:6;"><img src="img6.jpg"></span>
<span style="--i:7;"><img src="img7.jpg"></span>
<span style="--i:8;"><img src="img8.jpg"></span>
</div>
<script>
let box = document.querySelector('.box');
window.onmousemove = function (e) {
let x = e.clientX/3;
box.style.transform = "perspective(1000px) rotateY("+ x +"deg)";
}
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #262626;
}
.box
{
position: relative;
width: 200px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(1000px);
}
.box span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(240px);
-webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0002);
}
.box span img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box span::before
{
content: '';
position: absolute;
inset: 0;
z-index: 2;
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
