问题
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.
回答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.
来源：https://stackoverflow.com/questions/10623479/webkit-is-there-any-css-trick-to-bring-elements-to-front-without-scaling-it