旋转图像背面的文字

我试图编写一个库页面，其中包含九个图片在三乘三的网格。当有人点击图像时，我希望图像在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

问题是我不知道如何旋转图像，似乎没有任何工作 –