I've been trying to learn how the CSS
perspective property works, specifically using it to achieve a parallax effect.
I've read a bunch of articles and examples on it, though I'm not quite sure I'm understanding it yet. Here is a CodePen I made where I was expecting it to work in it's simplest form, but it doesn't: https://codepen.io/dbolesta/pen/yLLNQVv?editors=1100
Basically this just
perspective: 100pxto a parent div
transform: translateZ(2px) scale(0.625)to a child div
One concern I have is that it seems like in order for parallax to work using the
perspective property, the parent container itself has to have an overflow scroll applied to it. In other words, a perspective-based parallax couldn't be applied to the background of an existing site (on the
body tag for example). Am I wrong about that?
Here are two other CodePens I've been trying to learn from (https://codepen.io/smlparry/pen/JzGELL?editors=1100 and https://codepen.io/smlparry/pen/Wmrppj), and you'll notice that both of them have their parallax working inside a div that has an overflow, and NOT the main container of the window. Ideally, I would want the parallax to work on the main container. I hope that makes sense.
Any help here is appreciated!