テキストで移動できるように画像上のテキストを修正する方法は？

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>