Basically the title says it all. I have this code:
<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>
Now this works fine in Chrome and IE. I have problems with this in Firefox. The div is rotated, but not as it is in Chrome and IE. Does anyone know the cause of this, and how to solve the problem? adding -moz-perspective doesn't work either.
Firefox appears to render the line
top: 50%differently than the other browsers. The rotation is processed the same way, but since the top line is visible in FF, it looks like a different transform. Removingtop:50%from the CSS in my fork of Oriol's fiddle caused the same appearance on FF28, IE11, and Chrome 34.