My TranslateZ not working at all in Chrome or Edge
I've been trying to translate a Javascript example from a YT video of a animated card with both rotation and translateZ effects. I thought most of the original code done in Javascript could be handled in CSS with just the mouse tracking done in javascript.
However, niether th original code's 'translateZ' or my CSS version actually do anything,
I read another post here about a solution to translateZ issues being something to do with : "backdrop-filter: blur()". Net being sure what this was, I tried commenting out some box-shadow blur css lines, but that didn't help.
I've had to upload the coide as it makes the post too long if anyone can help me narrow down the problem
3 Replies
To use 3D effects you need to use a perspective and transform-style : preserve-3d
This video can help https://youtu.be/FeJEEE3zc4U?si=FsOkTC4AR9Bma9s5
Kevin Powell
YouTube
Create a 3D flipping animation with HTML and CSS
I'm a fan of minimlism in my designs, but since I stumbled across transform-style and some of the fun things that it opens up, I've been playing around a lot with some 3D stuff in CSS of late.
In this video I take a dive into how transform-style works in letting child elements stay in the 3D space instead of flat in their parent, as well as how...
I am using it on the card class.
transform-style: preserve-3d; needs to go on the body
(or the parent container, ie where the perspective is defined)