CSS animation 'origin' for each <g> - css

Question

Using CSS animation, I am adding a 'wobble' effect to each letter in a word. Each letter is made up of an SVG group <g>. However, as you can see in the example, the effect gets more extreme with each letter, whereas I want a consistent 'wobble' per letter (the same effect on each letter). How can this be acheived?
Note: I have not included the SVG source code, to keep the question tidy. It can be seen in the example if needed.
Thanks.
SCSS
// Logo
.logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
width: 260px;
display: block;
// SVG
svg {
display: block;
width: 100%;
overflow: visible;
g {
fill: transparent;
transition: all 300ms ease-in-out;
#keyframes wobble {
0% { transform: rotate(0) translate3d(0, 0, 0) }
25% { transform: rotate(2deg) translate3d(1px, 0, 0) }
50% { transform: rotate(-1deg) translate3d(0, -1px, 0) }
75% { transform: rotate(1deg) translate3d(-1px, 0, 0) }
100% { transform: rotate(-2deg) translate3d(-1px, -1px, 0) }
}
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
path {
fill: red;
}
}
}
}
Example

Answer 1

I could not figure out how to do it with SVGs - I did manage to come up with something similar to your requirement.
Part of the solution involved using a center point for the rotation:
transform-origin: center;
See demo below
#my-logo div {
display: inline-block;
color: red;
font-size: 60px;
font-family: arial;
font-weight: bolder;
text-transform: uppercase;
fill: transparent;
transition: all 300ms ease-in-out;
transform-origin: center;
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
}
#keyframes wobble {
0% {
transform: rotate(0) translate3d(0, 0, 0);
}
25% {
transform: rotate(2deg) translate3d(1px, 0, 0);
}
50% {
transform: rotate(-1deg) translate3d(0, -1px, 0);
}
75% {
transform: rotate(1deg) translate3d(-1px, 0, 0);
}
100% {
transform: rotate(-2deg) translate3d(-1px, -1px, 0);
}
}
<div id="my-logo">
<div>o</div>
<div>u</div>
<div>t</div>
<div>r</div>
<div>a</div>
<div>g</div>
<div>e</div>
<div>
<!-- also works with images -->
<img src="http://placekitten.com/100/100" />
</div>
</div>