0

3D Image Hover not working neither in FireFox nor Edge

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

19th Dec 2019, 12:00 AM
Claude Dumont
Claude Dumont - avatar
2 Answers
0
I don't see any browser prefixes in your code. Have you used -moz for Firefox and -ms for Edge?
19th Dec 2019, 9:17 AM
Xyenia 🦉
Xyenia 🦉 - avatar
0
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...
19th Dec 2019, 11:21 PM
Claude Dumont
Claude Dumont - avatar