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 的左边缘从最大值减小到零。

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

这是您的jsbin的编辑。

于 2013-05-19T22:59:50.193 回答
1

显然有人对此进行了很多编辑。

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

最简单的解决方法是更改​​您正在旋转的轴。其次，您可能必须为某些浏览器使用专有前缀，但可能不是 Vucko 建议的那样，因为 IIRC.css使用面向 DOM 的驼峰式样式属性，而不是破折号属性。

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

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

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

于 2013-05-19T22:25:15.490 回答