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)吗？

- Naor

---

@adeneo：你的链接有误。 - Naor

我也不认为这会起作用，但尝试修复这样的问题很有趣 :) - Mathijs Flietstra

@user1846192：同意！:) - Naor

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的编辑结果。

- Jérôme

Answer 2

显然有人对此进行了大量编辑。

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

最简单的解决方法是改变你旋转的轴。其次，你可能需要在一些浏览器中使用专有前缀，但也许不是Vucko提出的方式，因为我记得.css使用基于DOM的驼峰式属性，而不是破折号属性。

编辑：如果你真的想围绕垂直轴（与屏幕共面）旋转它，我想你可能需要将被旋转的东西与接收事件的东西分开。

有多种方法可以做到这一点，但是，请看一下：

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

- JayC

---

我想要旋转Y而不是Z。为什么旋转的元素应该与接收事件的元素不同？ - Naor

我不信任旋转项目提供的width和position测量值。我甚至不知道在这方面应该有什么标准行为。 - JayC