Problems with transform and z-index CSS

Navigation
0

Hello Stackoverflow community!

As you can see in the image, the problem is why my 3D effect exceeds the z-index of the div that is closest to the user? This only happens to me in Safari, in the other browsers it works correctly.

The div that contains the div of the background image, has as property: z-index: 49; position: absolute; and the div that looks trimmed has property: z-index: 50; position: absolute; 

<div class="pieces" style="background-image: url("img/normal.jpg"); transition: transform 0.2s ease-out; transform: perspective(1000px) translate3d(2.05564px, 2px, 0px) rotate3d(1, 0, 0, 2deg) rotate3d(0, 1, 0, 1.02782deg);">

And this is what I apply to the div that contains the background image.

    
asked by WTFChamp 01.08.2018 в 05:23
source

2 answers

1

Z-index safari errors are fixed with: 

-webkit-transform:translate3d(0,0,0);

I would need to see your code to tell you exactly where to put it, but try adding to the lowest element that I think is where your background image is in position: absolute

Maybe this page can help you more: link

    
answered by 01.08.2018 в 07:19
1

If you put the background image z-index - 1 , it should work since you want the image in the background.

Check this documentation I think it will help you:

link

    
answered by 01.08.2018 в 05:29
Error on Vector in Java Problem with "Text" library in Unity