第12章 CSS 3D变换

旋转立方体：竞赛3分题的含金量 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第12章

🎯 学习目标

知识目标

  • 理解perspective透视与观察距离
  • 掌握transform-style: preserve-3d
  • 掌握translateZ与六面装配法
  • 掌握竞赛任务7"旋转立方体"完整解法

能力目标

  • 能独立搭建并装配CSS 3D立方体
  • 能编写绕轴旋转的循环动画
  • 能排查"立方体塌成平面"的经典问题

德育目标

  • 培养空间想象与严谨推理能力
  • 通过3分题理解"高价值任务值得深投入"

教学重点

  • preserve-3d的作用
  • 六面"先转向再推出"装配公式
  • 竞赛任务7评分点

教学难点

  • 旋转轴在元素自身坐标系
  • rotate与translateZ的书写顺序不可交换

💻 实例演示1个实例 · 可在线运行

▶ 竞赛任务7：旋转立方体

两个240px彩色立方体分别绕Y轴、X轴旋转——竞赛真题完整复刻。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，观察两个立方体的不同旋转方式
  2. 注释掉transform-style:preserve-3d，观察立方体"塌"成平面
  3. 修改translateZ(120px)为60px，观察立方体变"扁"
  4. 交换.right的rotateY与translateZ顺序，观察装配失败
  5. 用开发者工具3D视图（Layers）观察六面空间关系
  6. 对照评分点：边长/六色/9格/双旋转/5秒循环

效果观察点

  • preserve-3d是3D效果的开关
  • 装配顺序"先转向再推出"不可颠倒
  • 关键帧rotateY从-35°到-395°正好一圈
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 7 - 旋转立方体</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; background: #29303b; display: flex;
               align-items: center; justify-content: center; }
  .cube { width: 240px; height: 240px; transform-style: preserve-3d;
          transform: rotateX(-32deg) rotateY(-35deg); margin: 120px; position: relative; }
  .cube > div { position: absolute; width: 240px; height: 240px; opacity: .9; }
  span { display: block; width: 80px; height: 80px; float: left; border: 2px solid #fff; }
  .front  { background: #fa5252; transform: translateZ(120px); }
  .back   { background: #f76707; transform: translateZ(-120px); }
  .right  { background: #12b886; transform: rotateY(90deg) translateZ(120px); }
  .left   { background: #4c6ef5; transform: rotateY(90deg) translateZ(-120px); }
  .top    { background: #fab005; transform: rotateX(90deg) translateZ(120px); }
  .bottom { background: #7950f2; transform: rotateX(90deg) translateZ(-120px); }
  .rotateY > .cube { animation: rotateY 5s ease-in-out infinite; }
  .rotateX > .cube { animation: rotateX 5s ease-in-out infinite; }
  @keyframes rotateY {
    0% { transform: rotateX(-32deg) rotateY(-35deg); } 25% { transform: rotateX(-32deg) rotateY(-125deg); }
    50% { transform: rotateX(-32deg) rotateY(-215deg); } 75% { transform: rotateX(-32deg) rotateY(-305deg); }
    100% { transform: rotateX(-32deg) rotateY(-395deg); } }
  @keyframes rotateX {
    0% { transform: rotateX(-32deg) rotateY(-35deg); } 25% { transform: rotateX(58deg) rotateY(-35deg); }
    50% { transform: rotateX(148deg) rotateY(-35deg); } 75% { transform: rotateX(238deg) rotateY(-35deg); }
    100% { transform: rotateX(328deg) rotateY(-35deg); } }
</style>
</head>
<body>
  <div class="scene rotateY">
    <div class="cube">
      <div class="front"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="back"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="right"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="left"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="top"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="bottom"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
  <div class="scene rotateX">
    <div class="cube">
      <div class="front"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="back"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="right"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="left"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="top"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      <div class="bottom"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
</body>
</html>

📋 实习任务书

任务目标：独立完成竞赛任务7旋转立方体并理解3D原理

任务内容与评分
任务1：写出六面装配的角度与位移推导（20分）
任务2：搭建240px六色立方体静态结构（25分）
任务3：为每面添加九宫格白框装饰（15分）
任务4：实现绕Y轴5秒循环旋转（20分）
任务5：实现第二个绕X轴旋转的立方体（20分）

自我评价

📚 课后作业与预习