如何修復圖像上的文字，使其可以隨文字移動？

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>