CSS transition-属性 for rotate3d 不适用于 SVG

Question

我在为 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>

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>

CSS transition-属性 for rotate3d 不适用于 SVG

CSS transition-property for rotate3d does not work on SVGs

html

css

svg

css-transitions

css-transforms