當使用CSS翻轉卡時，文本向下移動

我正在製作可以顯示一些獲勝者照片的翻轉卡，並且當翻轉卡時會顯示關於這些人的一些信息。我能夠製作這些卡片甚至翻轉它們。但問題是，在第二張卡片中，我們盤旋，卡片翻轉，信息顯示在卡片下方而不是卡片上。此外，圖像也被反轉並顯示，但是，一旦卡被翻轉，它不應該顯示圖像。雖然第一個很好。所以如果任何人都可以指出這個問題，那麼這會很有幫助。當使用CSS翻轉卡時，文本向下移動

這就是我將鼠標懸停在第二張卡片上時的行爲方式。

這是代碼。

<html> 
<head> 
    <style> 
     .winners_table{ 
       border: 2px solid red; 
     } 
     .winner_container { 
       border: 2px solid blue; 
       perspective: 1000px; 
       display: inline-block; 
       margin: 5px; 
       width: 220px; 
       height: 250px; 
       z-index: 1; 
       position: relative; 
     } 
     .winner{ 
       border: 2px solid black; 
       transition: 0.6s; 
       transform-style: preserve-3d; 
       width: 100%; 
       height: 100%; 
     } 
     .winner_container:hover .winner{ 
       transform: rotateY(180deg); 
       -webkit-transform: rotateY(180deg); 
     } 
     .winner img{ 
       border-radius: 300px; 
       border: 1px solid white; 
       margin: 0 auto; 
       box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15); 
       margin: 0 auto; 
     } 
     .winner h3{ 
       text-align: center; 
     } 
     /* hide back of pane during swap */ 
     .front, .back { 
       position: absolute; 
       backface-visibility: hidden; 
       -webkit-backface-visibility: hidden; 
     } 
     /* back, initially hidden pane */ 
     .back { 
       transform: rotateY(180deg); 
       padding: 5px; 
     } 
    </style> 
</head> 

<body> 
    <table> 
    <tr class="winners_table"> 
     <td class="winner_container"> 
      <div class="winner"> 
       <div class="front"> 
        <img src="facebook.png" alt="Winner" height="200" width="200"> 
        <h3>Facebook</h3> 
       </div> 
       <div class="back"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue</p> 
       </div> 
      </div> 
     </td> 
     <td class="winner_container"> 
      <div class="winner"> 
       <div calss="front"> 
        <img src="facebook.png" alt="Winner" height="200" width="200"> 
        <h3>Facebook</h3> 
       </div> 
       <div class="back"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue </p> 
       </div> 
      </div> 
     </td> 
    </tr> 
    </table> 
</body>

如果你想看到的GitHub庫然後，it's here。

來源

2016-10-29 Gurjyot Singh

只是拼寫錯誤。在你的第二個DIV你寫

<div calss="front">

，而不是

<div class="front">

工作demo。

來源

2016-10-29 20:37:24 Aer0

現在我很尷尬。非常感謝你給我的問題留下時間。 :) –

不客氣，我的朋友。 :) – Aer0

當使用CSS翻轉卡時，文本向下移動

回答

相關問題