Question

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

Js part

 $(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

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

1 个答案: