如何使用 HTML 和 CSS 创建图像折叠效果？

在 web 开发中，创建视觉吸引力的效果是非常重要的，其中图像折叠效果可以为网站增添一份复杂感，本文将会介绍如何使用 HTML 和 CSS 创建这种效果。

HTML 结构

首先，我们需要先写好 HTML 结构，其中我们需要为每个图像折叠区域创建一个容器：

<div class="fold-container">
  <div class="fold">
    <img src="image.jpg" alt="image">
  </div>
</div>

每个容器中包含一个 fold 类型的子容器和一个图片，fold 容器是我们后面会使用的关键元素，其样式是我们要着重关注的。

CSS 样式

接下来，我们需要使用 CSS 为每个容器设置样式，其中最为关键的是 fold 容器的样式：

/* 折叠容器样式 */
.fold {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  perspective: 1000px;
}

/* 折叠容器下的图片样式 */
.fold img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out;
  transform-origin: bottom;
}

/* 鼠标悬浮时的样式 */
.fold:hover img {
  transform: rotateX(-180deg);
}

其中，.fold 类样式的 padding-bottom 值是折叠容器的关键，它设定了容器和子元素之间的高度比例关系。同时，perspective 属性使容器具备三维感，为折叠效果提供支持。

完整代码

以下是完整的 HTML 和 CSS 代码，可以通过复制粘贴到自己的项目中来实现：

<div class="fold-container">
  <div class="fold">
    <img src="image.jpg" alt="image">
  </div>
</div>

<style>
.fold {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  perspective: 1000px;
}

.fold img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out;
  transform-origin: bottom;
}

.fold:hover img {
  transform: rotateX(-180deg);
}
</style>

通过以上步骤，我们便成功地实现了图像折叠效果，这个技巧可以用在单个图像上，也可以用在图像列表上，为网站增色不少。