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的修改。

Answer 2

显然有人对此进行了大量修改。

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

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

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

有多种方法可以做到，但是，看看

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

css3根据光标旋转

2 个答案: