如何修复图像上的文本以便它可以随文本移动？

Question

我想在图片上修复文字，这样如果我的图片移动或翻转，我的文字也会移动或翻转文字。我怎样才能做到这一点 ？我只是希望我的文字与图像动画一致。

例如：如果我的图片翻转，其上的文字也应翻转。     如果我的图像弹出，则文本也会弹出     如果我的图像移动，那么文本也随之出现。

总的来说，我只是想在图像上修复文字。

由于

Answer 1

.flip {
            width: 300px;
            height: 500px;
            perspective: 1000px;
        }
        .flip_box {
            width: 300px;
            height: 500px;
            position: relative;
            transition: all 0.4s linear;
            -webkit-transition: all 0.4s linear;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d
        }
        .front, .back {
            position: absolute;
            width: 300px;
            height: 500px;
            top: 0px;
            left: 0px;
            border: 1px solid #666;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        .front {
            color: red;
            font-size: 16px;
        }
        .back {
            color: blue;
            font-size: 18px;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
        .flip:hover .flip_box {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }

<div class="flip">
    <div class="flip_box">
        <div class="front">
            Hello
        </div>
        <div class="back">
            Bye
        </div>
    </div>
</div>