¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita0
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
2 Respuestas
0
I don't see any browser prefixes in your code.
Have you used -moz for Firefox and -ms for Edge?
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...