<html>
<div className="z-10 w-full h-screen bg-[#192c4e] scroll-transform-container ">
<div className='flex justify-center items-center w-full'></div>
</div>
</html>
<style>
.scroll-transform-container {
transform-origin: left top;
transition: transform .5s ease-out;
animation: 1ms rotate45DegAnimation;
animation-direction: alternate;
animation-timeline: scroll(block nearest);
perspective-origin: left top;
}
@keyframes rotate45DegAnimation {
0% {
transform: perspective(1000px) rotateY(90deg);
}
100% {
transform: perspective(1600px) rotateY(20deg);
}
}
</style>
I'm trying to implement a page rotation effect using CSS transforms, where a rectangle on the page starts off being perpendicular and, as the user scrolls down, gradually rotates to 45 degrees. I've been experimenting with the transform property,
but I'm encountering some issues in achieving the desired effect.
Reference - https://www.hexa3d.io/ ---> 1st Section
Github - https://github.com/Aniruddha-Gade/next-app Live - https://next-app-six-wine.vercel.app/
