How can i get this svg element to rotate from the center

Question

I'm completely new to working with svg's and I'm trying to get this wind turbine to rotate from the center but its rotating strangely. I'm creating the svg from Illustrator, do i need to center an element in the artboard to get it rotating from that center or what is the preferred way of doing this?

Here is a Codepen

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.79 18.62" style="enable-background:new 0 0 18.79 18.62;" xml:space="preserve">
        <g id="pillar">
            <path class="st0" d="M9.77,13.71c-0.4-0.19-1.03-3.23-1.06-3.58C8.68,9.78,8.8,8.72,8.92,8.01c0.02-0.13,0.04-0.21,0.06-0.3
       c0.1-0.41,0.19-0.47,0.19-0.47l0.92-0.05l-0.08-0.54c-0.08-0.54-0.85-0.54-0.93,0L7.46,18.08c-0.04,0.28,0.18,0.53,0.46,0.53h3.26
       c0.28,0,0.5-0.25,0.46-0.53l-0.62-4.36C10.59,13.81,10.03,13.83,9.77,13.71z" />
            <path class="st0" d="M8.98,8.7c-0.02,0.09-0.04,0.18-0.06,0.3c-0.11,0.71-0.24,1.78-0.21,2.12c0.03,0.34,0.66,3.39,1.06,3.58
       c0.26,0.12,0.82,0.1,1.25,0.02l-0.84-5.9C9.77,8.98,9.32,8.94,8.98,8.7z" />
            <path class="st0"
                d="M8.98,8.7c0.34,0.24,0.79,0.28,1.21,0.12L10.1,8.18L9.17,8.24C9.17,8.24,9.08,8.3,8.98,8.7z" />
        </g>
        <path id="shadow" class="st1" d="M10.19,7.82L10.1,7.18L9.17,7.24c0,0-0.1,0.06-0.19,0.47c-0.02,0.09-0.04,0.18-0.06,0.3
   C8.8,8.72,8.68,9.78,8.71,10.13c0.03,0.34,0.66,3.39,1.06,3.58c0.26,0.12,0.82,0.1,1.25,0.02L10.19,7.82z" />
        <g id="turbine">
            <g>
                <path class="st0" d="M8.44,5.48C8.36,5.44,8.28,5.4,8.15,5.36C7.47,5.1,6.43,4.76,6.08,4.72C5.73,4.68,2.52,4.66,2.23,5.01
			C1.95,5.35,1.82,6.49,1.97,6.76C2.12,7.04,2.98,7.2,3.47,7.29c0.5,0.09,3.05,0.82,3.56,0.65C7.54,7.77,7.69,7.8,7.81,7.58
			c0.06-0.11,0.28-0.26,0.47-0.37C8.19,7.1,8.12,6.99,8.07,6.85C7.9,6.35,8.07,5.81,8.44,5.48z" />
                <path class="st1" d="M8.86,5.77c0,0-0.04-0.11-0.42-0.29C8.07,5.81,7.9,6.35,8.07,6.85C8.12,6.99,8.19,7.1,8.28,7.21
			c0.18-0.1,0.35-0.18,0.35-0.18L8.86,5.77z" />
            </g>
            <g>
                <path class="st0" d="M10.54,7.32c0.09,0.03,0.18,0.05,0.3,0.08c0.72,0.14,1.8,0.31,2.15,0.3c0.35-0.02,3.52-0.52,3.75-0.91
			c0.22-0.39,0.17-1.53-0.02-1.78s-1.07-0.26-1.57-0.27c-0.51-0.01-3.14-0.31-3.62-0.06c-0.47,0.25-0.63,0.24-0.71,0.48
			c-0.04,0.12-0.23,0.3-0.41,0.44c0.1,0.09,0.2,0.19,0.26,0.32C10.93,6.38,10.85,6.94,10.54,7.32z" />
                <path class="st1" d="M10.07,7.11c0,0,0.06,0.1,0.46,0.21c0.32-0.39,0.39-0.94,0.14-1.41c-0.07-0.13-0.16-0.23-0.26-0.32
			c-0.16,0.13-0.32,0.24-0.32,0.24L10.07,7.11z" />
            </g>
            <g>
                <path class="st0" d="M8.87,8.02c0,0.09,0,0.18,0.02,0.31c0.07,0.73,0.23,1.81,0.35,2.14c0.12,0.33,1.54,3.21,1.98,3.31
			c0.44,0.1,1.51-0.29,1.69-0.55c0.18-0.26-0.06-1.1-0.2-1.58c-0.14-0.49-0.63-3.09-1.01-3.47c-0.38-0.38-0.42-0.53-0.67-0.53
			c-0.13,0-0.35-0.13-0.54-0.26c-0.06,0.12-0.13,0.24-0.23,0.35C9.88,8.12,9.33,8.21,8.87,8.02z" />
                <path class="st1" d="M8.93,7.52c0,0-0.08,0.08-0.07,0.51c0.46,0.19,1.01,0.1,1.39-0.28c0.1-0.1,0.17-0.22,0.23-0.35
			c-0.18-0.12-0.32-0.23-0.32-0.23L8.93,7.52z" />
            </g>
            <circle class="st0" cx="9.4" cy="6.58" r="1.12" />
        </g>
        <g id="wind">
            <path class="st2"
                d="M15.23,3.75h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" />
            <path class="st2"
                d="M13.57,11.34h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" />
            <path class="st2"
                d="M0.78,10.13h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67" />
            <path class="st2"
                d="M1.31,11.18h2.68c0.35,0.05,0.6,0.32,0.63,0.63c0.03,0.4-0.33,0.76-0.74,0.74c-0.34-0.02-0.64-0.3-0.67-0.67" />
            <line class="st2" x1="0.25" y1="2.23" x2="4.74" y2="2.23" />
            <line class="st2" x1="14.17" y1="6.35" x2="16.06" y2="6.35" />
        </g>
    </svg>

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100%;
}

svg {
  width: 150px;
  height: 150px;
}

svg #turbine {
  animation: rotate 3s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.st0 {
  fill: #ff0000;
}

.st1 {
  fill: #af0000;
}

.st2 {
  fill: none;
  stroke: #0071bc;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 100;
}

Answer 1

Adjust the transform-origin:

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100%;
}

svg {
  width: 150px;
  height: 150px;
}

svg #turbine {
  animation: rotate 3s linear infinite;
  transform-box: fill-box;    
  transform-origin: 60% 48.5%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.st0 {
  fill: #ff0000;
}

.st1 {
  fill: #af0000;
}

.st2 {
  fill: none;
  stroke: #0071bc;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 100;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18.79 18.62" style="enable-background:new 0 0 18.79 18.62;" xml:space="preserve">
<g id="pillar">
	<path class="st0" d="M9.77,13.71c-0.4-0.19-1.03-3.23-1.06-3.58C8.68,9.78,8.8,8.72,8.92,8.01c0.02-0.13,0.04-0.21,0.06-0.3
		c0.1-0.41,0.19-0.47,0.19-0.47l0.92-0.05l-0.08-0.54c-0.08-0.54-0.85-0.54-0.93,0L7.46,18.08c-0.04,0.28,0.18,0.53,0.46,0.53h3.26
		c0.28,0,0.5-0.25,0.46-0.53l-0.62-4.36C10.59,13.81,10.03,13.83,9.77,13.71z"/>
	<path class="st0" d="M8.98,8.7c-0.02,0.09-0.04,0.18-0.06,0.3c-0.11,0.71-0.24,1.78-0.21,2.12c0.03,0.34,0.66,3.39,1.06,3.58
		c0.26,0.12,0.82,0.1,1.25,0.02l-0.84-5.9C9.77,8.98,9.32,8.94,8.98,8.7z"/>
	<path class="st0" d="M8.98,8.7c0.34,0.24,0.79,0.28,1.21,0.12L10.1,8.18L9.17,8.24C9.17,8.24,9.08,8.3,8.98,8.7z"/>
</g>
<path id="shadow" class="st1" d="M10.19,7.82L10.1,7.18L9.17,7.24c0,0-0.1,0.06-0.19,0.47c-0.02,0.09-0.04,0.18-0.06,0.3
	C8.8,8.72,8.68,9.78,8.71,10.13c0.03,0.34,0.66,3.39,1.06,3.58c0.26,0.12,0.82,0.1,1.25,0.02L10.19,7.82z"/>
<g id="turbine">
	<g>
		<path class="st0" d="M8.44,5.48C8.36,5.44,8.28,5.4,8.15,5.36C7.47,5.1,6.43,4.76,6.08,4.72C5.73,4.68,2.52,4.66,2.23,5.01
			C1.95,5.35,1.82,6.49,1.97,6.76C2.12,7.04,2.98,7.2,3.47,7.29c0.5,0.09,3.05,0.82,3.56,0.65C7.54,7.77,7.69,7.8,7.81,7.58
			c0.06-0.11,0.28-0.26,0.47-0.37C8.19,7.1,8.12,6.99,8.07,6.85C7.9,6.35,8.07,5.81,8.44,5.48z"/>
		<path class="st1" d="M8.86,5.77c0,0-0.04-0.11-0.42-0.29C8.07,5.81,7.9,6.35,8.07,6.85C8.12,6.99,8.19,7.1,8.28,7.21
			c0.18-0.1,0.35-0.18,0.35-0.18L8.86,5.77z"/>
	</g>
	<g>
		<path class="st0" d="M10.9,6.13c0.08-0.05,0.16-0.1,0.26-0.17c0.59-0.43,1.44-1.12,1.67-1.39c0.23-0.27,1.99-2.95,1.85-3.38
			C14.54,0.75,13.66,0.03,13.35,0s-0.91,0.61-1.26,0.98c-0.35,0.37-2.35,2.11-2.48,2.63C9.48,4.13,9.37,4.23,9.49,4.46
			c0.06,0.11,0.06,0.37,0.05,0.59c0.14-0.01,0.28-0.01,0.42,0.02C10.47,5.21,10.83,5.63,10.9,6.13z"/>
		<path class="st1" d="M10.43,6.33c0,0,0.11,0.02,0.47-0.2c-0.07-0.49-0.43-0.92-0.94-1.06C9.82,5.04,9.68,5.04,9.54,5.05
			C9.53,5.26,9.5,5.44,9.5,5.44L10.43,6.33z"/>
	</g>
	<g>
		<path class="st0" d="M9.17,8.08c0,0.09,0,0.18,0.02,0.31c0.07,0.73,0.23,1.81,0.35,2.14c0.12,0.33,1.54,3.21,1.98,3.31
			c0.44,0.1,1.51-0.29,1.69-0.55s-0.06-1.1-0.2-1.58c-0.14-0.49-0.63-3.09-1.01-3.47c-0.38-0.38-0.42-0.53-0.67-0.53
			c-0.13,0-0.35-0.13-0.54-0.26c-0.06,0.12-0.13,0.24-0.23,0.35C10.18,8.17,9.63,8.27,9.17,8.08z"/>
		<path class="st1" d="M9.23,7.57c0,0-0.08,0.08-0.07,0.51c0.46,0.19,1.01,0.1,1.39-0.28c0.1-0.1,0.17-0.22,0.23-0.35
			c-0.18-0.12-0.32-0.23-0.32-0.23L9.23,7.57z"/>
	</g>
	<circle class="st0" cx="9.56" cy="6.58" r="1.12"/>
</g>
<g id="wind">
	<path class="st2" d="M15.23,3.75h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67"
		/>
	<path class="st2" d="M13.57,11.34h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67"
		/>
	<path class="st2" d="M0.78,10.13h2.68c0.35-0.05,0.6-0.32,0.63-0.63c0.03-0.4-0.33-0.76-0.74-0.74c-0.34,0.02-0.64,0.3-0.67,0.67"
		/>
	<path class="st2" d="M1.31,11.18h2.68c0.35,0.05,0.6,0.32,0.63,0.63c0.03,0.4-0.33,0.76-0.74,0.74c-0.34-0.02-0.64-0.3-0.67-0.67"
		/>
	<line class="st2" x1="0.25" y1="2.23" x2="4.74" y2="2.23"/>
	<line class="st2" x1="14.17" y1="6.35" x2="16.06" y2="6.35"/>
</g>
</svg>
</body>

</html>

Answer 2

Since the junction of the turbine is not in the center of its canvas you need to manually adjust the transform-origin:

With these coordinates

svg #turbine {
  animation: rotate 3s linear infinite;
  transform-origin: 51% 35%;
}

the turbine will rotate properly

Answer 3

The #turbine element is not perfectly squared as you can see in this screenshot:

If you could rotate your svg in illustrator in a way that its starting position would have the same width as height, you have a perfect rotating wind turbine.