3D Image Hover not working neither in FireFox nor Edge

Question

Hey gurus,

My code (below) works as intended in Chrome and only in Chrome. Tried to add -webkit etc. here and there but I can't get it working. I think I have the same problem in all my codes. Is there a standard solution for this issue?

https://code.sololearn.com/WaQaFKu9D2er/#html

Best regards and thank you for any help.
Claude

Answer 1

I don't see any browser prefixes in your code.

Have you used -moz for Firefox and -ms for Edge?

Answer 2

Here's what I tested (I also saved the code in Sololearn):

CSS:

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
background-color: #382525;
transform: perspective(800px);
-moz-transform: perspective(800px);
-ms-transform: perspective(800px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

JS:

function MoveAround(event) {

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 = event.target.offsetHeight;

var x = (cX - oL - (oW / 2)) / 5;
var y = ((cY - oT - (oH / 2)) / 5) * -1;

var elem = event.target.style;

elem.width = "300px";
elem.height = "300px";

elem.webkitTransform = "rotateX(" + y + "deg) rotateY(" + x + "deg)";
elem.MozTransform = "rotateX(" + y + "deg) rotateY(" + x + "deg)";
elem.msTransform = "rotateX(" + y + "deg) rotateY(" + x + "deg)";

}

function MoveOut(event) {

var elem = event.target.style;
elem.width = "200px";
elem.height = "200px";
elem.webkitTransform = "rotateX(0deg) rotateY(0deg)";
elem.MozTransform = "rotateX(0deg) rotateY(0deg)";
elem.msTransform = "rotateX(0deg) rotateY(0deg)";
}

I can't see what's wrong but nothing works in FF or Edge...