css parallax

back

middle

front

<style>
.layers {
    -webkit-perspective: 1px;
    -webkit-perspective-origin: 50% 50%;
    height: 50vh;
    overflow-y: auto;
    /*margin-top:-20%;*/
}

.layer {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    font-size: 150px;
    text-align: center;
    padding:100% 0;
}

.layer-front { 
    /*background-color: rgba(0, 255, 0, 0.7);*/
    color: red;
}

.layer-middle {
    -webkit-transform: translateZ(-1px) scale(2);
    -moz-transform: translateZ(-1px) scale(2);
    /*background-color: rgba(196, 0, 0, 0.7);*/
    color:green;
}

.layer-back {
    -webkit-transform: translateZ(-2px) scale(3);
    -moz-transform: translateZ(-2px) scale(3);
    /*background-color: rgba(196, 0, 196, 0.7);*/
    color:blue;
}
</style>

<div class="layers">
        <div class="layer layer-front">front</div>
        <div class="layer layer-middle">middle</div>
        <div class="layer layer-back">back</div>
    </div>

----------------------------------------------------------------
The scale factor can be calculated with 1 + (translateZ * -1) / perspective

reference:
https://www.w3schools.com/howto/howto_css_parallax.asp
https://keithclark.co.uk/articles/pure-css-parallax-websites/