When you remove the

@keyframes rotate {
    100% { transform: rotateZ(360deg); } 
}

block, you will see my construct as it’s intended, but when you paste it back in, everything changes its position and nothing looks like it’s supposed to anymore.

<div id="f1">
    <div class="fluegel" id="fluegelr"></div>
    <div class="stab" id="stabr"></div>
    <div class="fluegel" id="fluegell"></div>
    <div class="stab" id="stabl"></div>
    <div class="fluegel" id="fluegelh"></div>
    <div class="stab" id="stabh"></div>
    <div class="fluegel" id="fluegelu"></div>
    <div class="stab" id="stabu"></div>
    </div>



<div id="centerCircle"></div>


<style>

#fluegelr
{
 left: 52%;
 top: 53%;
}
#stabr
{
    left: 50%;
    top: 55%;
}

#fluegell
{
transform: rotate(180deg);
 left: 41%;
 top: 55%;
}
#stabl
{
    transform: rotate(180deg);
    left: 46.4%;
    top: 55%;
}

#fluegelh
{
 transform: rotate(90deg);
 left: 46.9%;
 top: 43%;
}
#stabh
{
 transform: rotate(90deg);
 left: 48.5%;
 top: 52%;
}

#fluegelu
{
 transform: rotate(270deg);
 left: 45.9%;
 top: 65%;
}
#stabu
{
 transform: rotate(270deg);
 left: 48.5%;
 top: 58%;
}


.fluegel
{
position: absolute;
 width: 8rem;
 height: 1rem;
 background-color: aqua;
 border-radius: 8rem 8rem 0  0 ;
 border: 3px solid black;
 
}

.stab
{
    position: absolute;
    height: 2px;
    width: 58px;
    background-color: black;
}
#f1
{
    animation-name: rotate;
    animation-timing-function: linear;
    animation-duration: 60s;
}

#centerCircle
{
    position: absolute;
    border-radius: 100%;
    background-color: black;
    height: 20px;
    width: 20px;
    left: 49.5%;
    top: 53.8%;
}

@keyframes rotate {
    100% { transform: rotateZ(360deg); } 
}

</style>

I do not know, maybe it is because of the “%”.