Почему я не могу перевести изображение?

Question

У меня есть несколько html-изображений, которые я хочу отобразить в 3D:

<div class="col-9">
    <div class="Flipper">
        <img src="static/images/drapes.png" class="projectFrame Flipper-inner" id="img1">

        <img src="static/images/drapes.png" class="projectFrame Flipper-inner" id="img2">

        <img src="static/images/drapes.png" class="projectFrame Flipper-inner" id="img3">
    </div>
</div>

А затем я пытаюсь изменить его с помощью CSS, чтобы расположить несколько изображений друг над другом, например:

.Flipper {
    margin-top: 10%;
    perspective: 1000px;
    display: flex;
}

.Flipper-inner {
    transform: rotateY(80deg);
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

#img2 {
    display: inline-block;
    transform: translate3d(-200px, 0px, 0px);
    transform: rotateY(80deg);
}

Однако независимо от того, что я делаю, изображения остаются статичными