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

【问题标题】：CSS transition-property for rotate3d does not work on SVGsrotate3d 的 CSS 过渡属性不适用于 SVG
【发布时间】：2020-09-23 23:15:26
【问题描述】：

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

有什么方法可以单独选择 rotate 或 rotate3d 以便我可以使用其他变换而不用缓动？

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

【问题讨论】：

transition: rotate 0.3s ease-in-out; --> transition: transform 0.3s ease-in-out;。旋转是一个值而不是属性
虽然@TemaniAfif 的评论在 OP 的情况下是正确的，但您可以（很快）开始 using individual transforms as properties（仅限 Firefox 72+），因此应该可以在它们上进行转换。仅供参考！ :)
@TemaniAfif 谢谢！有什么方法可以使它的缓动只对rotate3d 变换有效，对transformX 无效？

标签： html css svg css-transitions css-transforms

【解决方案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>

【讨论】：