3

私は次のことをしようとしています:
画面上に正方形の div を作成し、カーソルがホバリングしているときはいつでも、正方形を水平方向に回転 (rotateY) する必要があります。
これは私がやったことです:
http://jsbin.com/ujolop/1/edit

HTML:

<div class="a"></div>

CSS:

.a {
  width: 200px;
  height: 200px;
  background-color: green;
}

JavaScript:

var maxRotate = 30; //deg

$('.a').on('mousemove', function(event) {
  var $this = $(this),
      width = $this.width(),
      center = width / 2,
      left = $this.position().left,
      curRelPosX = event.clientX - left,
      percent = (curRelPosX - center) / center,
      rotate = percent * maxRotate;

  $this.css('transform', 'rotateY(' + rotate + 'deg)');
});

これは仕事ではありません。ジャンプし、ほとんどの場合、カーソルのホバーに反応しません。
何か案は？

更新
私が正しければ、理由は不明ですが、これはfirefoxでは正常に機能していますが、chromeではうまく機能していません。理由はありますか？正しいイベント (mousemove) を使用していますか?

4

2 に答える 2

2

JavaScript の計算の一部を編集しました:

left = $this.parent().offset().left,
curRelPosX = event.pageX - left,
percent = (curRelPosX <= center) ? curRelPosX / center : (width - curRelPosX) / center

精度の問題があることがわかる場合console.log(left)は、上記のコードも正確なcurRelPosX.

計算についてはpercent、中心 (最大回転) を超えると、回転は div の左端で最大からゼロに減少するはずです。

CSSローテーションを適用した後、イベントが適切に機能しなかったため、div.a別のものも含めました。div.cmousemove

これがjsbinの編集です。

于 2013-05-19T22:59:50.193 に答える
1

どうやら誰かがこれに多くの編集を加えているようです。

http://jsbin.com/ujolop/30/edit

最も簡単な修正は、回転する軸を変更することでした。第二に、一部のブラウザーでは独自のプレフィックスを使用する必要があるかもしれませんが、IIRC として Vucko が提案したもの.cssではなく、ダッシュ プロパティではなく DOM 指向のキャメル ケース スタイル プロパティを使用している可能性があります。

編集：本当に垂直軸（画面と同一平面上）を中心に回転させたい場合は、回転しているものがイベントを受け取っているものとは異なる必要があると思います。

やり方はいろいろありますが、参考にしてください

http://jsbin.com/ujolop/39/edit

于 2013-05-19T22:25:15.490 に答える