WebKit：有没有任何css技巧把元素带到前面，而不缩放？ [英] WebKit: Is there any css trick to bring elements to front without scaling it?

问题描述

从图片中，我使用rotate3d（）到红色矩形，所以一半是在黑色矩形的前面，另一个在后面。

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.

>

我想要黑色矩形在红色矩形的前面，所以我必须使用translateZ（），所以它变成

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

问题是我想要黑色矩形前面不缩放它。我想要黑色矩形仍然是相同的大小。有什么招数吗？我尝试z-index，但它没有工作。我想是因为我使用rotate3d（）。

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().

先感谢。

推荐答案

我目前没有访问Safari来测试它，所以我把它留给你（让我知道如果它工作），但我相信以下应该工作。

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.

由于 -webkit-perspective 的浏览器解释似乎是问题，因为中注意到了，从 #container c $ c>并用 -webkit-transform：perspective（500）替换，然后添加相同的东西（ -webkit-transform：perspective 500）） #parent 和＃parent2 a href =http://jsfiddle.net/TPB7A/15/embedded/result/ =nofollow>。

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.

问题似乎是，当使用 -webkit-perspective 时，Safari不会应用 #container 是的。这似乎是规范的解释问题，正如我在回答另一个问题。

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.

这篇关于WebKit：有没有任何css技巧把元素带到前面，而不缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！