I'm trying to animate a svg door opening on hover, the behavior is good on Firefox 87.0, but bad on Chrome 89.0.
Do you have any suggestions to get the right behavior on chrome ?
svg #door{
perspective: 300px;
transform-style: preserve-3d;
}
svg #door-panel{
transform-origin: 140px 50%;
transition: transform 1s linear;
transform: rotateY(0deg);
}
svg #door-panel:hover{
transform-origin: 140px 50%;
transform: rotateY(15deg);
}<svg width="300px" height="300px" viewbox="0 0 434 409" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="door">
<g id="door-panel">
<rect x="140" y="1.678" width="187.783" height="397.792" style="fill:white;stroke:rgb(0,28,51);stroke-width:3px;"/>
<g>
<path d="M178.338,68.47C177.698,68.47 177.178,69.35 177.168,70.44L176.338,70.44L175.428,132.44C175.418,132.95 175.618,133.45 175.978,133.81C176.328,134.18 176.828,134.38 177.338,134.38L288.337,134.12C289.247,134.12 289.987,133.38 289.987,132.47L289.817,70.47C289.817,69.65 289.157,68.99 288.337,68.99L178.338,69.3L178.338,68.47ZM180.317,71.65L286.847,71.95L286.697,130.82L179.288,130.56L180.317,71.65Z" style="fill:rgb(0,28,51);"/>
</g>
<g>
<path d="M306.718,222.747C306.718,222.747 292.841,221.347 278.963,221.347C277.042,221.347 275.468,222.918 275.468,224.847C275.468,226.776 277.042,228.347 278.963,228.347C292.841,228.347 306.718,222.747 306.718,222.747Z" style="fill:rgb(0,28,51);"/>
</g>
<g>
<ellipse cx="304.969" cy="237.095" rx="3.5" ry="3.625" style="fill:rgb(0,28,51);"/>
</g>
<g>
<ellipse cx="304.149" cy="223.911" rx="4.437" ry="4.438" style="fill:rgb(0,28,51);"/>
</g>
<g>
<path d="M304.962,236.47L308.587,243.72L301.337,243.72L304.962,236.47Z" style="fill:rgb(0,28,51);"/>
</g>
<g>
<text x="207.914px" y="107.008px" style="font-size:16px;fill:rgb(0,28,51);">WTF ?</text>
</g>
</g>
<g id="door-frame">
<path d="M138.578,403.47C138.578,405.13 139.368,406.47 140.338,406.47L326.337,406.36C327.937,406.36 329.227,405.07 329.227,403.47L328.807,2.47C328.807,1.1 327.707,0 326.337,0L140.338,0.22C139.098,0.22 138.088,1.23 138.088,2.47L138.578,403.47ZM142.098,400.47C142.098,400.47 142.548,36.82 142.588,4.73L323.857,4.94L323.447,400.58C301.357,400.57 159.548,400.48 142.098,400.47Z" style="fill:rgb(0,28,51);"/>
</g>
</g>
</svg>