How to scroll effect 3d perspective on div-CodePudding

Do anyone knows how to built this scroll effect on this page? https://www.orlyanan.com/

I'm looking to do something like this but can't find no information

CodePudding user response：

You might want to look for JavaScript 3D libraries. One of them is Three.js, here is an example that might fit your needs: https://threejs.org/examples/#webgl_effects_parallaxbarrier

CodePudding user response：

If you inspect the page, you will see that they use this CSS properties:

transform: translate3d(0px, -500px, -24.378em) scale3d(1, 1, 1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
will-change: transform;

You need to work with translate3d(x,y,z). So you can experiment with the X, Y and Z axes

CodePudding user response：

I have made this so far: https://gilasdesign.com/BlogPrueba/prueba.html

But is there a way that position of images could be added automatically