Как приручить отрицательное вращение CSS?

Кажется, что невозможно позволить двум прямоугольникам вращаться в противоположных направлениях. Это приводит к выводу, что прямоугольник, вращающийся в обратном направлении, расположен ниже.

@keyframes gspin {
       from {transform:rotateZ(110deg);}
       to {transform:rotateZ(100deg);}
    }
    @keyframes spin {
       from {transform:rotateZ(70deg);}
       to {transform:rotateZ(80deg);}
    }
        #spinner {
             animation: spin 10s infinite; 
             transform-origin: 50% 50%;
          }
          #gspinner {
             animation: gspin 10s infinite;
             transform-origin: 50% 50%;
             z-index:0;
            }
<svg width="500" height="500" viewBox="0 0 600 600">
    <g id="spinner">    
    <rect rx="10" height="20" width="400" y="195" x="160" fill="darkgrey"/>    
    </g>    
    <g id="gspinner">    
    <rect rx="10" height="20" width="400" y="195" x="160" fill="darkgrey"/>    
    </g>
</svg>


svg css-animations keyframe
person Efried    schedule 20.06.2021    source источник
comment
<g id="spinner"> <rect rx="10" height="20" width="400" y="195" x="160" fill="darkgrey"/> </g> <g id="gspinner"> <rect rx="10" height="20" width="400" y="195" x="160" fill="darkgrey"/> </g> Я пробовал абсолютное преобразование-происхождение, с группировкой и без нее, а также негативные последовательности анимации, но безуспешно.   -  person Efried    schedule 21.06.2021
comment
может содержать какой-то ключ к решению, зеркальное отображение? mediaevent.de/tutorial/svg-transform.html   -  person Efried    schedule 22.06.2021