transform x and transformy werkt niet tegeijk

<style>

.custom-shape-divider-top-1709314495 {
   /*  position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1709314495 svg {
   /*  position: relative; */
    display: block;
   
    width: calc(100% + 1.3px);
   /* height: 56px; */
   
}
.custom-shape-divider-top-1709314495 .shape-fill {
    fill: var(--fillsvg);
}

.mirrordivider {
-webkit-transform: rotateY(180deg); 
transform: rotateY(180deg)

}

.mirrordividervertikaal {
-webkit-transform: rotateX(180deg); 
transform: rotateX(180deg)

}






</style>



<div id="spiegeldivider" class="custom-shape-divider-top-1709314495 mirrordivider mirrordividervertikaal">
    <svg id="divhoogte" style="height: 55px;" ata-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
   
        <path id="iddivtype1" style="--fillsvg: #897CA1;" d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
    </svg>

</div>