javascript - css3 根据光标旋转

Question

我正在尝试执行以下操作:
在屏幕上创建一个正方形 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)？

Answer 1

我在你的 JavaScript 中编辑了一些计算:

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

如果你console.log(left)你可以看到准确性有问题，上面的代码也能更好地确定确切的curRelPosX。

关于 percent 计算，如果你比中心更远(最大旋转)，旋转应该从其最大值减少到 div 左边缘的零。

我还将您的 div.a 包含在另一个 div.c 中，因为在您应用 css 后 mousemove 事件无法正常工作旋转。

这是您的 jsbin 的编辑.