CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Firefox 3D perspective issue [trick]

In case your 3d effects are not working in firefox you can use the perspective property as a function and add in to the transform property like this:

transform: perspective(500px) rotateY(180deg);
Gari Merrifield
Gari Merrifield
9,555 Points

That's a bit of a hack, but not a really good one. Adding "transform-style: preserve-3d;" to the ".photo" and the ".photo-container" are a better solution for Firefox.