Unable to scale elements on Z axis with blends active

Design help General
1

Hi,

I have an issue with using a piece of custom code from @vincent’s page regarding mix blends (http://sab.webflow.io/blend-modes).

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:
https://preview.webflow.com/preview/curtis-halligan-bb90c6?utm_source=curtis-halligan-bb90c6&preview=0fed9935bd0908d89fb97fd1cca0f8b1

Thanks,

Curtis

2

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?

3

Sorry no one has responded yet!

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

4

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

1 Like
5

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

6

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.

7

Here is published @sabanna: http://curtis-halligan-bb90c6.webflow.io/
The whole thing is completely flat for some reason.

8

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

https://bugs.chromium.org/p/chromium/issues/detail?id=543445

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:

9

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?

10

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.