WebKit: Is there any css trick to bring elements t

Question

From the picture, I use rotate3d() to the red rectangle so half of it is in front of black rectangle and the other is behind.

I want black rectangle to be front of red rectangle so I have to use translateZ() so it become

The problem is that I want black rectangle to be front without scaling it. I want black rectangle to still be the same size. Is there any trick? I tried z-index but it didn't work. I guess it because I use rotate3d().

Thanks in advance.

Answer 1

I do not have access to Safari at present to test it in, so I leave that to you (let me know if it works), but I believe the following should work.

Since browser interpretation of -webkit-perspective seems to be the problem as I noted in my answer to this question, remove it from #container and replace it with -webkit-transform: perspective(500) and then add the same thing (-webkit-transform: perspective(500)) to both #parent and #parent2 which is what I have done in this fiddle.

The issue seems to be that Safari does not apply a perspective to the #container when using -webkit-perspective whereas Chrome does. It seems to be a matter of interpretation of the spec, as I discussed in answering the other question.