CSS transform-origin not working properly on IOS and MAC

Question

I am currently trying to make a photo carousel with VueJs. It works in 3D via perspective and rotates with transform-origin. On all browsers except Safari it works perfectly. See the video.

On the other hand on safari the carousel does not turn correctly. It only rotates on the axis of the first image. Otherwise, the carousel does not appear fixed.

Here is my code :

<div class="carousel">
    <div class="photographies" :style="{'transform' : 'rotateY(' + `${this.currentImg * -this.circleLength}` + 'rad)', '-webit-transform' : 'rotateY(' + `${this.currentImg * -this.circleLength}` + 'rad)'}">
        <img src="@/assets/images/carousel/parking_porsche.jpg" alt="Revel - Photographie voitures de sport" width="220" height="275">
        <img src="@/assets/images/carousel/golf.jpg" alt="Revel - Photographie montre golfeur" width="220" height="275">
        <img src="@/assets/images/carousel/burger.jpg" alt="Revel - Photographie burger et Bud's" width="220" height="275">
        <img src="@/assets/images/carousel/porsche.jpg" alt="Revel - Photographie voiture Porsche" width="220" height="275">
        <img src="@/assets/images/carousel/parfum.jpg" alt="Revel - Photographie de parfum" width="220" height="275">
        <img src="@/assets/images/carousel/voiture_sport.jpg" alt="Revel - Photographie voiture" width="220" height="275">
        <img src="@/assets/images/carousel/viet.jpg" alt="Revel - Photographie Bol de soupe asiatique" width="220" height="275">
        <img src="@/assets/images/carousel/masseuse.jpg" alt="Revel - Photographie masseuse" width="220" height="275">
        <img src="@/assets/images/carousel/dame.jpg" alt="Revel - Photographie femme évènement" width="220" height="275">
        <img src="@/assets/images/carousel/eden_park.jpg" alt="Revel - Photographie produits Eden Park" width="220" height="275">
    </div>

    <div class="carousel-navigation">
        <button class="nav prev" @click.stop="currentImg--">Back</button>
        <button class="nav next" @click.stop="currentImg++">Next</button>
    </div>
</div>

export default {
    name: 'CarouselComp',
    data() {
        return {
            currentImg: 0,
            circleLength: 2*Math.PI/10,
            rotate: 0
        }
    },
}

.carousel {
    $item-separation: 80px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-perspective: 500px;
    perspective: 500px;
    overflow: hidden;

    .photographies {
        width: 300px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform-origin: 50% 50% -450px;
        transform-origin: 50% 50% -450px;
        
        img {
            width: 100%;
            padding: 0  $item-separation / 2;
            opacity: 1;
            object-fit: cover;
            
            &:not(:first-of-type) {
                position: absolute;
                left: 0;
                top: 0;
                -webkit-transform-origin: 50% 50% -450px;
                transform-origin: 50% 50% -450px;
            }
            
            @for $i from 2 through 10 {
                &:nth-child(#{$i}) {
                    -webkit-transform: rotateY(#{($i - 1) * 2 * 3.141592653589793 / 10}rad);
                    transform: rotateY(#{($i - 1) * 2 * 3.141592653589793 / 10}rad);
                }
            }
        }
    }
}

.carousel-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em 0;
    
    button {
        margin: 0 0.5em;
        color: white;
        background: none;
        border: 1px solid white;
        letter-spacing: 1px;
        padding: 0.5em 1em;
    }
}