CSS transition-property for rotate3d does not work on SVGs - html

Question

I'm having trouble using a transition-property for rotate3d. It works with all but not with rotate or rotate3d.
Is there any way to single out rotate or rotate3d so I can use other transforms without easing?
.lock-animation {
width:6em;
margin:2em auto;
overflow:visible;
}
.lock-animation svg {
overflow:visible;
}
.lock-animation g#lock-top{
transition: rotate 0.3s ease-in-out;
}
.lock-animation:hover g#lock-top {
transform: translateX(150%) rotate3d(0, 1, 0, -180deg);
}
<div class="lock-animation">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 448 512" enable-background="new 0 0 448 512" xml:space="preserve">
<g id="lock-bottom" focusable="false">
<g>
<path fill="none" d="M224,48c-52.9,0-96,43.1-96,96v48h192v-48C320,91.1,276.9,48,224,48z"/>
<path fill="none" d="M48,464h352V240H48V464z M196,320c0-15.5,12.5-28,28-28s28,12.5,28,28v64c0,15.5-12.5,28-28,28
s-28-12.5-28-28V320z"/>
<path d="M224,412c15.5,0,28-12.5,28-28v-64c0-15.5-12.5-28-28-28s-28,12.5-28,28v64C196,399.5,208.5,412,224,412z"/>
<path d="M400,192h-32h-48H128H80H48c-26.5,0-48,21.5-48,48v224c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V240
C448,213.5,426.5,192,400,192z M400,464H48V240h352V464z"/>
</g>
</g>
<g id="lock-top">
<path d="M223.7,0C303.2-0.2,368,64.5,368,144v48h-48v-46.8c0-52.8-42.1-96.7-95-97.2c-53.4-0.6-97,42.7-97,96v56
c0,13.3-10.7,24-24,24s-24-10.7-24-24v-54.6C80,65.8,144,0.2,223.7,0z"/>
</g>
</svg>
</div>

Answer 1

You need to adjust the transform-origin then you can get rid of the translate and apply transition to transform that contains only rotate
.lock-animation {
width: 6em;
margin: 2em auto;
overflow: visible;
}
.lock-animation svg {
overflow: visible;
}
.lock-animation g#lock-top {
transition: transform 0.3s ease-in-out;
transform-origin: 90% 0;
transform-box: fill-box;
}
.lock-animation:hover g#lock-top {
transform: rotate3d(0, 1, 0, -180deg);
}
<div class="lock-animation">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 448 512" enable-background="new 0 0 448 512" xml:space="preserve">
<g id="lock-bottom" focusable="false">
<g>
<path fill="none" d="M224,48c-52.9,0-96,43.1-96,96v48h192v-48C320,91.1,276.9,48,224,48z"/>
<path fill="none" d="M48,464h352V240H48V464z M196,320c0-15.5,12.5-28,28-28s28,12.5,28,28v64c0,15.5-12.5,28-28,28
s-28-12.5-28-28V320z"/>
<path d="M224,412c15.5,0,28-12.5,28-28v-64c0-15.5-12.5-28-28-28s-28,12.5-28,28v64C196,399.5,208.5,412,224,412z"/>
<path d="M400,192h-32h-48H128H80H48c-26.5,0-48,21.5-48,48v224c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V240
C448,213.5,426.5,192,400,192z M400,464H48V240h352V464z"/>
</g>
</g>
<g id="lock-top">
<path d="M223.7,0C303.2-0.2,368,64.5,368,144v48h-48v-46.8c0-52.8-42.1-96.7-95-97.2c-53.4-0.6-97,42.7-97,96v56
c0,13.3-10.7,24-24,24s-24-10.7-24-24v-54.6C80,65.8,144,0.2,223.7,0z"/>
</g>
</svg>
</div>