rotate3d 的 CSS 过渡属性不适用于 SVG

Question

我在使用transition-property进行rotate3d时遇到问题。它适用于all，但不适用于rotate或rotate3d。

有没有办法挑出旋转或旋转3d，这样我就可以在不缓动的情况下使用其他变换？

.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

您需要调整transform-origin然后您可以摆脱平移并将过渡应用于仅包含旋转的transform

.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>