Streaming live at 10am (PST)

Unable to scale elements on Z axis with blends active


I have an issue with using a piece of custom code from @vincent’s page regarding mix blends (

I have my text inside a div block which has a child perspective enabled, and I want to bring my text forward on the Z axis in order to create a perception of 3D depth. This seems to work however when I go into preview the image is completely flattened and the elements are returned to their original place of 0 on the Z axis.

I have tried removing the blend effect from the elements and the text works as it should do when I do this, leading me to believe that the blend class is causing the image to be flattened.

Is what I am trying to do possible, or is there a work around for this at all?

Any help would be appreciated, here’s a link to my read only project:



I’m still stuck with this and would very much like to get it fixed. I am sure that there’s a way around it as I have seen this functioning on other websites. Does anyone have any ideas?

Sorry no one has responded yet!

@vincent Think you can help since it’s your code?

@sabanna do you think you can help this guy? After seeing your 3D sphere, you are the 3D master.

1 Like

@cur.tis, let me know if I misunderstand the problem: Z-trasforms applied to the text will not show on the published site?

Z-transforms work fine and blends work fine when used individually, however when the two are combined they do not work. The blend mode cancels out the Z-axis transformation and causes the 3D elements to be flattened.

Here is published @sabanna:
The whole thing is completely flat for some reason.

It appears to be an old Chrome browser bug, I found this conversation/report from 3 y ago:

Even more, in Firefox it doesn’t work at all. Only in Safari you can notice z-axis transforms.

I am sorry :woman_shrugging:t3:

Ah, that’s a real shame. Thanks for taking a look at me anyway.

Is it possible there is a fix or workaround for this or is it not possible?

Yes I have just checked now. I can get it to work roughly how I want on Safari. So frustrating because Chrome is “supposed” to be the most superior browser.