Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula grƔtis0
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 Respostas
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...