为什么我不能翻译图像？

Question

我有一些要以3D显示的html图像：

<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);
}

但是无论我做什么图像都保持不变