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中工作得不好。知道为什么吗?我是否使用正确的事件(鼠标移动)?

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，因为mousemove事件不能正常工作后，你应用css旋转。

这是你的jsbin编辑

Answer 2

显然有人对这个做了很多编辑。

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

最简单的修复是改变你旋转的轴。其次，您可能必须为某些浏览器使用专有前缀，但可能不是Vucko建议的，因为IIRC, .css使用面向DOM的驼色大小写样式属性，而不是dash属性。

编辑:如果你真的想让它绕着垂直轴旋转(与屏幕共面)，我想你可能需要让你旋转的东西与接收事件的东西不同。

有不止一种方法可以做到，但是，看看

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