旋转图像背面的文字

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

它肯定会帮助您完成所需的翻转转换，并可能需要学习更多的转换