0

画像を 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で完全に機能しています。しかし、クロムでは、遠近効果はアニメーションが完了した後にのみ発生します。IE アニメーションでは、最終的な位置に変更されるだけです。プレフィックス「-webkit-」を追加しようとしましたが、それでも同じ問題が発生します。

4

1 に答える 1

-1

-webkit-専用のブラウザを使用する必要がありますtransform

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

jquery が管理不能になるのを防ぐために、これらの値をクラス内に配置してからclass、css

于 2013-08-23T20:58:07.443 に答える