I want to create a parallax effect for an image on my webpage built with react. At the moment, I am using javascript however this is not an ideal solution considering 3 lines of css can do the same thing. The problem is, I need to be able to use translateZ.

When I apply transform: translateZ(-10px); to my image, nothing happens, and IntelliJ gives me red squiggles saying Unknown function 'translateZ'. Everything else is set up correctly for sure, the image is inside a wrapper div with perspective: 10px; transform-style: preserve-3d;, and either way this would not affect whether the function translateZ itself is recognized.

I cannot for the life of me find anything about this online, which to me seems to indicate that perhaps something is messed up locally? Because I don't understand why an entire css function would just be absent in react for no reason.

EDIT: Forgot to mention, translate3d() also has the same issue, it is not recognized.

CodePudding user response：

You probably need to make this a string "translateZ(-10px)" instead. If you're passing the style or className props, you'll need the object you pass to have strings as their values.

CodePudding user response：

You can try translate3d(0, 0, VALUE)