Question

我正在制作飞行无人机的动画，我需要两个机翼围绕两个不同的轴旋转。

到目前为止，这是我所拥有的，但是它似乎有故障并且不能正确旋转。我该怎么做才能改善？

  .drone .body {
  	z-index: 1;
  	color: #050423;
  }

  .drone .wing {
  	top: 1px;
  	color: #000000;
    transform-origin: center;
  }

  .drone.animate .wing {
  	animation: wing 5s linear forwards infinite;
  }

  @keyframes wing {
  	100% {
  		transform: rotateY(7200deg);
  	}
  }

<div style="width:100px;height:100px;">
  <svg class="drone animate" width="100%" viewBox="0 0 50 20">
    <g>
      <g class="wing left">
        <path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    		<path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>    </g>
      <g class="wing right">
        <path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z"/>
    		<path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z"/>
      </g>
      <g class="body">
        <path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9
    			c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5
    			C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0
    			c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5
    			c0-0.6,0.4-1,1-1V0.5z"/>
      </g>
    </g>
  </svg>
</div>

Answer 1

在下图中，红色框显示了SVG画布的边框

您需要稍微扩展SVG画布并将无人机放置在viewBox="-3 -3 60 20"的中心

正如@Temani Afif-transform-box: fill-box;所评论的那样，对于螺旋桨螺钉的对称旋转，这是必需的

.wing {
    fill: #000;
    transform-origin: center center;
    transform-box: fill-box;
  }

要绘制svg元素，请使用fill属性而不是color

.drone .body {
  	fill: #050423;
  }

   .wing {
  	fill: #000;
    transform-origin: center center;
	transform-box: fill-box;
  }

  .drone.animate .wing {
  	animation: wing 5s linear forwards infinite;
  }

  @keyframes wing {
  	100% {
  		transform: rotateY(7200deg);
  	}
  }

<svg class="drone animate"  height="20vh" viewBox="-3 -3 60 20">
    <g>
      <g class="wing left">
        <path d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
    		<path d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>    </g>
      <g class="wing right">
        <path d="M48,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S48.6,2,48,2z"/>
    		<path d="M43,2c-0.6,0-8-0.4-8-1s7.4-1,8-1s1,0.4,1,1S43.6,2,43,2z"/>
      </g>
      <g class="body">
        <path d="M45,0.5C45,0.2,45.2,0,45.5,0S46,0.2,46,0.5V4c0.6,0,1,0.4,1,1v1h0.5C48.3,6,49,6.7,49,7.5S48.3,9,47.5,9H37v0.9
    			c0,0.7-0.4,1.4-1,1.7l-3.6,2.1c-0.3,0.2-0.7,0.3-1,0.3h-6.9c-0.4,0-0.7-0.1-1-0.3L20,11.6c-0.6-0.4-1-1-1-1.7V9H8.5
    			C7.7,9,7,8.3,7,7.5S7.7,6,8.5,6H9V5c0-0.6,0.4-1,1-1V0.5C10,0.2,10.2,0,10.5,0C10.8,0,11,0.2,11,0.5V4c0.6,0,1,0.4,1,1v1h7l0,0
    			c0.1-0.6,0.4-1.2,1-1.6l3.6-2.1c0.3-0.2,0.7-0.3,1-0.3h6.9c0.4,0,0.7,0.1,1,0.3L36,4.4C36.6,4.8,37,5.3,37,6l7,0V5
    			c0-0.6,0.4-1,1-1V0.5z"/>
      </g>
    </g>
  </svg>

下面是完整代码：

围绕多个轴旋转svg元素

1 个答案: