<div id="container"></div>
body, html, #container {
width: 100%;
height: 100%;
overflow:hidden;
}
div, img {
position:absolute;
user-select: none;
overflow:hidden;
}
gsap.set('#container', {perspective:900});
const n = 20; //number of divs
for (let i=0; i<n; i++){
let b = document.createElement('div');
b.classList.add('box');
document.getElementById('container').appendChild(b);
gsap.set(b, {
left:'50%',
top:'50%',
xPercent:-50,
yPercent:-50,
color:'#fff',
z:2000,
width:318, //adjust as needed to avoid space between divs
height:'110%',
rotationY:i/n*360,
transformOrigin:String("50% 50% -1000%"),
backgroundImage:'url(https://assets.codepen.io/721952/pano.jpg)',
backgroundPosition:i*-318+'px -220px'
});
}
window.onmousemove = (e)=>{
gsap.to('.box', {duration:0.6, rotationY:(i)=>-180+i/n*360+360*(e.clientX/window.innerWidth) }); // TO DO: add vertical movement
}
This Pen doesn't use any external CSS resources.