Web前端技术实验

实验11　2D变换照片墙的结构与变换

课程代码 ZY070018｜适用：2024级、2025级｜第11次
2026—2027学年第一学期
字段内容字段内容
大纲锚点实验项目十：通过2D变换实现动态照片墙学时拆分第1次（4学时项目的前2学时）
项目属性基础验证型 / 必做 / 1人一组课程目标LO1、LO2、LO3
本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

  • 掌握translate、rotate、scale、transform-origin。
  • 建立可复用的照片卡片结构和响应式网格。
  • 避免变换导致内容裁切、重叠或阅读顺序混乱。

二、核心任务

  1. 准备至少8张本地图片及准确alt，使用figure/figcaption建立卡片。
  2. 用Grid建立照片墙，不使用绝对定位摆放全部照片。
  3. 为不同卡片设置轻微rotate/translate修饰，并控制transform-origin。
  4. 悬停或聚焦时将当前卡片置顶、放大并恢复角度，避免遮挡标题。

三、验收标准

序号可观察条件记录
18张图片加载成功，卡片结构统一。□通过　□需修改
2布局由Grid承担，transform只负责视觉变化。□通过　□需修改
3放大卡片可完整查看且不会被父容器裁切。□通过　□需修改

四、提交物

  • 照片墙阶段作品
  • assets目录
  • 变换参数说明
  • 实验报告阶段记录

统一命名：学号_姓名_实验11

五、90分钟流程

时间活动
0—10说明与安全检查
10—25预测、演示、最小验证
25—65独立完成核心任务
65—80测试与同伴复核
80—90抽查与退出记录

六、评分量规（100分）

维度分值判定要点
功能与任务完成45必做功能可运行，数据和交互正确
测试与问题修复20有边界或错误测试，并保留复测记录
代码与页面质量15结构、命名规范，控制台无未解释错误
报告与证据15报告、截图与源码相互对应
现场解释5能解释关键实现和至少一项修改

七、拓展与思考

选做：使用CSS自定义属性控制每张卡片的初始角度。

思考：transform为什么通常不改变普通文档流占位？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。