旋轉圖像背面的文字

我試圖編寫一個庫頁面，其中包含九個圖片在三乘三的網格。當有人點擊圖像時，我希望圖像在Y軸上旋轉，並在黑色背景上顯示白色文本。問題是我不知道如何旋轉圖像。我認爲這與css有關？旋轉圖像背面的文字

HTML：

<div id="gallery" class="gallery-section section-container type3"> 
    <div class="container"> 
     <div class="indent-10"> 
      <div class="row"> 

       <div class="col-md-4"> 
        <div class="img-wrapper"> 
         <img src="img/gallery-img-1.jpg" alt="gallery-img-1"/> 
        </div> 
        <div class="text-wrapper"> 
         <div class="header-wrapper"> 
          <h3> 
           Rushed Flats 
          </h3> 
         </div> 
         <div class="para-wrapper"> 
          <p> 
           architecto beatae vitae dicta sunt explicabo. Nam libero tempore, cum soluta nobis est 
           eligendi optio cumque nihil impedit quo minus id quod maxime placeat. 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

的CSS：

.gallery-section{ 
    .indent-10{ 
    max-width: 85%; 
    margin: 0 auto; 
    } 
    .img-wrapper{ 
    margin-bottom: 2px; 
    img{ 

    } 
    } 
    .text-wrapper{ 
    .header-wrapper{ 
     h3{ 

     } 
    } 
    .para-wrapper{ 
     p{ 

     } 
    } 
    } 
}

來源

2016-09-30 Myfanwy Jones

https://davidwalsh.name/demo/css-flip.php – Pete

該問題不包含需要修復的特定問題，因此它太寬泛。您沒有實現JavaScript或CSS一側。 – Esko

問題是我不知道如何旋轉圖像，似乎沒有任何工作 –