текст на обратной стороне вращающегося изображения

Question

Я пытаюсь закодировать страницу галереи, которая содержит девять изображений в сетке три на три. когда кто-то нажимает на изображение, я хочу, чтобы изображение вращалось по оси 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{ 

     } 
    } 
    } 
} 

Answer 1

Посетите ссылку ниже, и там вы получите знать о CSS 3D переходы анимации и т.д.

https://desandro.github.io/3dtransforms/docs/card-flip.html

его безусловно, поможет вам перейти на переходный переход, который вы хотите и много более переход, который вы, возможно, захотите узнать.