javascript - RotateY 和 Perspective 动画在 chrome 中无法正常工作？

Question

我想在 y 方向旋转图像。我的代码如下

js部分

 $(function () {

      $("#content").click(function () {
          var css = {
              'transform': 'perspective(2000px) rotateY(-25deg )',
                  'transition-duration': '500ms'
          };
          $("#content").css(css);
      });
  });

CSS 部分

 #mainpage{
    height: 100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;

  }
  #menubar{
    height: 100%;
    width:100px;
    position: absolute;
    top:0;
    left:0;
    background: #FF0000;
  }
  #content{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    background-image:url(images/clubs/Informals.jpg);
    background-size:100% 100%;
  }

HTML 部分

<div id="mainpage">
<div id="menubar"></div>
<div id="content"></div>
</div>

该代码在 Firefox 中运行良好。但在 chrome 中，透视效果只有在动画完成后才会出现。在 IE 动画中不起作用，它只是更改为最终位置。我尝试添加前缀“-webkit-”，但我仍然遇到同样的问题。

Answer 1

您需要使用特定的浏览-webkit-器transform

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */

为了防止您的 jquery 变得难以管理，我可能有益于将这些值放在一个类中，然后添加class而不是css