0

基本上标题说明了一切。我有这个代码：

<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也不起作用。

4

1 回答 1

0

Firefox 似乎以top: 50%不同于其他浏览器的方式呈现该行。旋转的处理方式相同，但由于顶线在 FF 中可见，因此看起来像是不同的变换。从我的 Oriol 小提琴叉中top:50%的 CSS 中删除导致在 FF28、IE11 和 Chrome 34 上出现相同的外观。

于 2014-04-21T17:03:04.890 回答