基本上标题已经说明了一切。我有这段代码:
<html>
<head>
<style>
body
{
-webkit-perspective: 500px;
perspective: 500px;
}
#mydiv
{
transform:rotateY(45deg);
-webkit-transform:rotateY(45deg);
-o-transform:rotateY(45deg);
position:absolute;
left: 50%;
top: 50%;
width:720px;
height:360px;
margin:-180px 0px 0px -360px;
background-color:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="mydiv">
this is my div.
</div>
</body>
</html>
现在这在 Chrome 和 IE 中工作正常。我在 Firefox 中遇到了这个问题。 div 已旋转，但不像在 Chrome 和 IE 中那样。有谁知道这个问题的原因，以及如何解决这个问题？添加 -moz-perspective 也不起作用。
最佳答案
Firefox 似乎以不同于其他浏览器的方式呈现 top: 50% 行。旋转的处理方式相同，但由于顶线在 FF 中可见，因此看起来像是不同的变换。从 my fork of Oriol's fiddle 中的 CSS 中删除 top:50%在 FF28、IE11 和 Chrome 34 上导致相同的外观。
关于CSS 透视图在 Firefox 中不像在其他浏览器中那样起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23200387/