回転している画像の裏にあるテキスト

Question

ギャラリーページをコーディングしようとしています。ギャラリーページには、3つのグリッドに9つの画像が含まれています。画像をクリックすると、画像が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

それあなたが必要とするフリップトランジションのために間違いなくあなたを助けます。より多くの移行が学びたい場合があります