CODEWITHSUNDEEP
cssheighttransformparallaxperspective
Lisa Thamer
Lisa Thamer

Reputation: 11

What is the relation between perspective, translateZ, scale and height in CSS parallax?

I've been trying to find out what exactly the relation is between the perspective, transform (more specifically translateZ and scale) and height properties (using vh) are when it comes to pure-CSS parallax.

When using the following numbers, the effect works as expected: 2px perspective, -1px translateZ, 1.7 scale for the parallax-part and 70vh height for the non-parallax-part. See here: Working

.middle {height: 70vh;}

When changing the height of the non-parallax-part to 50vh (while keeping everything else the same), however, the two background images show an overlap before the non-parallax-part comes into view/covers the overlap. See here: Overlap showing

.middle {height: 50vh;}

I'm assuming I need to adjust the numbers for perspective, translateZ and scale when I change the vh height, but is there any formula/any rhyme and reason as to how? Or is it trial and error to find a combination that works/doesn't show the overlap?

Upvotes: 1

Views: 173

Answers (1)

Lisa Thamer
Lisa Thamer

Reputation: 11

I have sort of figured it out. If you keep 2px perspective and -1px translateZ, the scale and height relate as follows:

  • scale 1.5 (or higher) needs at least 50vh height
  • scale 1.6 (or higher) needs at least 60vh height
  • scale 1.7 (or higher) needs at least 70vh height etc.

However, this only applies for scale 1.5 and up, not down. Not sure how the scale factor below 1.5 relates to height (yet).

Upvotes: 0

Related Questions