The utilities "front" and "back" dont seem to work

[donaldhubduck]

I can try it out on your site how the utilities "front" and "back" should work. But I cant get them to work. Here you can try it out: https://jsfiddle.net/sphcrfu3/

I have tried both the latest NPM package and the CDN. Both gets me the same results where it ignores the "back" and "front" utility.

When I write the following html it only seems to fade and not "zoom". It does not behave as the same html does on your playground on your site.

<div class="square-group" xyz="fade back-5">
  <div class="square xyz-in"></div>
  <div class="square xyz-in"></div>
  <div class="square xyz-in"></div>
</div>

Thanks!

[milesingrams]

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/

[donaldhubduck]

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