我需要创建一个旋转背景的豆形。我有带有图像元素的SVG。该图像具有“旋转”类。我使用CSS旋转它。
链接到codepen：http ://codepen.io/olam/pen/hJCla
它仅适用于Chrome。在Firefox中，transform-origin：50％50％无效。在Safari中，我完全看不到图像。
如果您能给我一些建议，那将会很棒。
您可以切换为使用SVG动画。然后，它应可在所有浏览器上使用。
更改图像元素，使其外观如下所示。
<image class="rotation" overflow="visible" width="506" height="267"
xlink:href="---snipped out for brevity---"
transform="matrix(0.6998 0 0 0.6998 -42.1211 -26.0269)">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 253 133"
to="-360 253 133"
dur="25s"
repeatCount="indefinite"/>
</image>
更新资料
如果您使用绝对坐标而不是百分比，则原始的代码笔示例将在Firefox中运行。
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: spin;
animation-timing-function: linear;
transform-origin:253px 133px;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句