Javascript Firefox和edge兼容性问题（Transform RotateX）。铬很好用。（JS、CSS和HTML）

我正在尝试重新创建3D悬停效果，很可能是蒸汽卡，但我对FF和Edge的兼容性有问题。我想我正确地使用了前缀，但它不起作用。顺便说一句，Chrome运行得很好。我的代码也在Sololearn上运行（）

代码如下：

函数移动（事件）{
var cX=event.clientX；
var cY=event.clientY；
var oL=event.target.offsetLeft；
var oT=event.target.offsetTop；
var oW=event.target.offsetWidth；
var oH=事件。目标。远视；
变量x=（cX-oL-（oW/2））/5；
变量y=（（cY-oT-（oH/2））/5）*-1；
//添加以下行以在表示之前转换负值。
而（x<0）{
x=x+360；
}
而（x>360）{
x=x-360；
}
而（y<0）{
y=y+360；
}
而（y>360）{
y=y-360；
}
var elem=event.target.style；
elem.width=“300px”；
elem.height=“300px”；
elem.transform=“rotateX（+y+”度）rotateY（+x+”度）”；
log（“cX:，cX，“cY:，cY:，oL:，oL，”oT:，oT，“oW:，oW:，oW:，oH:，oH，”x:，x，“y:，y:，y”）
}

正文{
保证金：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：500px；
背景色：#382525；
变换：透视（800px）；
变换样式：保留-3d；
}
#演示{
位置：相对位置；
宽度：200px；
高度：200px；
边框：7px纯白；
背景图像：url（“https://www.chi.lu/cats/cat.jpg");
背景位置：中心；
文本对齐：居中；
盒影：0 0 10px 5px rgba（0,0,0,0.3）；
}

鼠标移动

moveAround函数中没有设置标准的

transform

样式。FF和Edge使用标准样式名称，不带供应商前缀。OMG，您完全正确。我添加了一行

elem.transform=“rotateX（+y+”deg）rotateY（+x+”deg）”和它的工作，但不是预期的。这有点像鼠标移动时的慢动作反应。使用FF71处理stacksnippet似乎效果很好。@Teemu-Hm，我有FF71 64位，但代码段根本不起作用。为什么它对你有用？如果我们在您这边有一个工作代码，而我们使用的是同一个浏览器，为什么它对我不起作用？有什么想法吗？FF和Edge的有效悬停区域比Chrome的小一些，但是当效果出现时，这三种浏览器的悬停区域都是一样平滑的。但是当以整页模式显示代码段时，FF和Edge似乎有很大的区别。FF什么也不做，Egde在原始图像和效果之间不断闪烁，而as Chrome在全页模式下似乎也能正常工作。