Question

我正在学习CSS动画，遇到了这个动画，我无法使正方形围绕其中心轴旋转。任何帮助将不胜感激。

谢谢

.spinBox {
  animation: spin 1s infinite;
  transform-origin: 50% 50%;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="98.076px" height="98.084px" viewBox="187.709 105.871 98.076 98.084" style="enable-background:new 187.709 105.871 98.076 98.084;"
  xml:space="preserve">
<path style="fill:#A5A7A8;" d="M277.301,154.912c0,22.404-18.168,40.563-40.559,40.563c-22.388,0-40.555-18.158-40.555-40.563
	c0-22.4,18.168-40.568,40.555-40.568C259.135,114.344,277.301,132.512,277.301,154.912z"/>
<path style="fill:#A5A7A8;" d="M236.742,203.955c-27.039,0-49.033-22.002-49.033-49.043c0-27.039,21.994-49.041,49.032-49.041
	c27.042,0,49.044,22.002,49.044,49.041C285.785,181.953,263.787,203.955,236.742,203.955z M236.742,122.82
	c-17.689,0-32.083,14.395-32.083,32.092c0,17.695,14.393,32.092,32.083,32.092c17.697,0,32.094-14.396,32.094-32.092
	C268.838,137.213,254.442,122.82,236.742,122.82z"/>
<rect class="spinBox" x="228.6" y="146.422" style="fill:#FFFFFF;" width="16.275" height="16.949"/>
</svg>

使用CSS围绕其轴旋转SVG正方形

0 个答案: