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

它肯定会帮助你完成你想要的翻转过渡以及你可能想要学习的更多过渡

旋转图像背面的文字

1 个答案: