The utilities "front" and "back" dont seem to work about animxyz HOT 2 CLOSED

Hi donaldhubduck, thank you for the feedback!

The reason the Z-axis transforms (front/back) are not working is that you need to provide a perspective either to a parent element of the transformed elements or to the transform itself: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#perspective

The most natural 3D effect can be achieved by adding the perspective to the parent element so that all transforms are happening in the same perspective space.

We need to document this better since we don't write about it in the transform section but rather in the perspective section (https://animxyz.com/docs#perspective).

Here is the jsFiddle with perspective added:
https://jsfiddle.net/frn3aLk6/2/

from animxyz.

The reason the Z-axis transforms (front/back) are not working is that you need to provide a perspective either to a parent element of the transformed elements or to the transform itself: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#perspective

Ah! I see! I loved the effect so I am happy that it works and that it was me who didn't add the appropriate css classes!

We need to document this better since we don't write about it in the transform section but rather in the perspective section (https://animxyz.com/docs#perspective).

Yeah, because in the example here https://animxyz.com/#sandbox called "drop out" doesn't have the perspective class but still the "back-5" effect works even though it shouldn't because neither the child or parent element has the perspective class to them.

I'm happy it works as intended! Now I can use this awesome effect in my projects! :D

from animxyz.