求助：为响应式相册添加点击翻转显示描述文本功能

开发者阿泽

2026-8-7

问题描述

这是我为家人制作的首个项目——趣味响应式相册，目前布局响应式、单张图片可独立翻转等功能已按预期实现，但卡在为图片添加翻转背面以显示拍摄日期/简短描述的功能上，恳请各位提供反馈与解决方案：

现有代码

HTML

<div class="container">
  <div class="main-header">
    <h1 class="gallary-title">Family <span class="header-text">Photos</span> Album</h1>
    <nav class="main-nav"></nav>
  </div>
  <div>
    <div class="box">
      <div class="album">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic2.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic3.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic4.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic5.jgp" onclick="flip(this)">
        <video class="album-photos" src="Images/Photos/video.mp4" controls onclick="flip(this)"></video>
      </div>
      <div class="album">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">

      </div>
      <div class="album">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <img class="album-photos" src="Images/Photos/pic1.jpg" onclick="flip(this)">
        <video class="album-photos" src="Images/Photos/video2.mp4" controls onclick="flip(this)"></video>
      </div>
    </div>
    <div class="btn">
      <form action="/Upload" method="post" enctype="multipart/form-data">
        <input type="file" id="fileInput" name="files[]" multiple style="display: none;">
        <button class="btn btn-upload" type="button " onclick="document.getElementById('fileInput').click();">Upload</button>
        <img id="displayImage">
      </form>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins;
}

body {
  background-image: url(https://wallpapercave.com/dwp1x/NcDdW2X.jpg);
}

.album-photos {
  display: grid;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 40px 50px 0 50px;
}

.main-header {
  padding-bottom: 30px;
  display: flex;
}

h1 {
  font-size: 300%;
  font-weight: bold;
  color: #f7f7f7;
  border-bottom: 3px solid rgba(255, 255, 255, .6);
}

.header-text {
  text-shadow: 0 0 3px #f7f7f7, 0 0 5px #ffffff;
  color: rgba(55, 55, 55, 0.9);
  font-weight: 100;
  font-size: 1.1em;
}

.container .box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: auto
}

.album {
  display: flex;
  flex-direction: column;
  width: 32.5%;
}

.container .box .album img,
.container .box .album video {
  width: 100%;
  padding-bottom: 10px;
  border-radius: 1em;
}

button {
  color: white;
  background-color: #56ccf2;
  border: none;
  border-radius: 1em;
  font-weight: bolder;
  font-size: 1em;
  padding: 0.67em;
  margin: 30px 0 30px 0;
}

.btn-upload:hover {
  background-color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.btn-upload {
  display: center;
}

#displayImage {
  display: flex;
  width: 375px;
  height: auto;
  border: none;
  border-radius: 1em;
}

@media (max-width: 768px) {
  .container .box {
    flex-direction: column;
  }
  .container .box .album {
    width: 100%;
  }
}

/* image flip on click */ .flipped {
  transform: rotateY(180deg);
  transition: transform 0.6s;
  background: #333;
}

JavaScript

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

const fileInput = document.querySelector("#fileInput");
var uploaded_image = "";

fileInput.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    uploaded_image = reader.result;
    document.querySelector("#displayImage").src = reader.result
  });
  reader.readAsDataURL(this.files[0]);
})


const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();

});

function flip(element) {
  element.classList.toggle("flipped");
}


photo.addEventListener('click', flipPhoto);

photo.addEventListener('touchstart', flipPhoto);

解决方案

要实现翻转显示背面信息，核心是用卡片容器包裹正面媒体和背面信息，通过CSS 3D变换实现完整的翻转效果，具体修改步骤如下：

1. 重构HTML结构：添加翻转容器

把每个<img>/<video>包裹进一个翻转容器，包含正面（媒体元素）和背面（日期/描述）：

<div class="flip-card" onclick="flip(this)">
  <div class="flip-card-inner">
    <!-- 正面：原有图片/视频 -->
    <div class="flip-front">
      <img class="album-photos" src="Images/Photos/pic1.jpg">
    </div>
    <!-- 背面：自定义日期和描述 -->
    <div class="flip-back">
      <h3>2023年10月5日</h3>
      <p>全家海边旅行合影</p>
    </div>
  </div>
</div>

视频元素同理，把<video>放在.flip-front中即可。

2. 更新CSS：实现3D翻转效果

替换原有.flipped样式，添加卡片翻转的核心样式：

/* 翻转容器：提供3D空间感 */
.flip-card {
  width: 100%;
  margin-bottom: 10px;
  perspective: 1000px;
  cursor: pointer;
}

/* 翻转内部容器：执行旋转动画 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* 触发翻转时的状态 */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* 隐藏元素背面，避免翻转时穿透显示 */
.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1em;
}

/* 正面样式：保持媒体元素比例 */
.flip-front img, .flip-front video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}

/* 背面样式：自定义背景和文字布局 */
.flip-back {
  background-color: #333;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem;
}

.flip-back h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2em;
}

.flip-back p {
  font-size: 0.9em;
  opacity: 0.8;
}

/* 调整相册布局，替换原有padding-bottom */
.album {
  display: flex;
  flex-direction: column;
  width: 32.5%;
  gap: 10px;
}

3. 调整JavaScript：适配新的翻转逻辑

更新flip函数，现在作用于.flip-card容器，同时修复原代码中未定义的photo变量问题：

function flip(element) {
  element.classList.toggle("flipped");
  // 可选：翻转视频时自动暂停
  const video = element.querySelector('video');
  if (video) {
    element.classList.contains('flipped') ? video.pause() : video.play();
  }
}

// 可选：移除内联onclick，用JS批量绑定事件（更规范）
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.flip-card').forEach(card => {
    card.addEventListener('click', () => flip(card));
    card.addEventListener('touchstart', () => flip(card));
  });
});

额外优化建议

上传功能可扩展：添加日期/描述输入框，上传时动态生成带背面的卡片
可给背面添加个性化样式，比如渐变背景、图标等
针对视频元素，可在翻转时隐藏控制栏，提升视觉一致性

内容的提问来源于stack exchange，提问作者JJoudreyy

求助：为响应式相册添加点击翻转显示描述文本功能

现有代码 #

HTML #

CSS #

JavaScript #

解决方案 #

1. 重构HTML结构：添加翻转容器 #

2. 更新CSS：实现3D翻转效果 #

3. 调整JavaScript：适配新的翻转逻辑 #

额外优化建议 #