CSS perspective doesn't act in Firefox as in other browsers

Question

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.

I see the same effect on FF31 and Chromium 36. [**Fiddle**](http://jsfiddle.net/7X2Uw/) — Oriol, Apr 21 '14 at 16:30
The fiddle looks very different on FF28. I tried messing with the perspective origin to get the top edge to be flush with the result window to no avail. — Austin Mullins, Apr 21 '14 at 16:54

score 0 · Answer 1 · answered Apr 21 '14 at 17:03

0

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. Removing top:50% from the CSS in my fork of Oriol's fiddle caused the same appearance on FF28, IE11, and Chrome 34.

answered Apr 21 '14 at 17:03

Austin Mullins

7,307
2
33
48

I guess I'm unclear on the goal. Removing `top:50%` made your example look the same on the 3 most commonly used browsers. Can you provide a screenshot of what was supposed to happen? – Austin Mullins Apr 21 '14 at 17:33

CSS perspective doesn't act in Firefox as in other browsers

1 Answers1