蓝桥杯 web 展开你的扇子（css3）

---

普通答案：

#box:hover #item1{
  transform: rotate(-60deg);
}
#box:hover #item2{
  transform: rotate(-50deg);
}
#box:hover #item3{
  transform: rotate(-40deg);
}
#box:hover #item4{
  transform: rotate(-30deg);
}
#box:hover #item5{
  transform: rotate(-20deg);
}
#box:hover #item6{
  transform: rotate(-10deg);
}
#box:hover #item12{
  transform: rotate(60deg);
}
#box:hover #item11{
  transform: rotate(50deg);
}
#box:hover #item10{
  transform: rotate(40deg);
}
#box:hover #item9{
  transform: rotate(30deg);
}
#box:hover #item8{
  transform: rotate(20deg);
}
#box:hover #item7{
  transform: rotate(10deg);
}

1. 选择器解析

#box:hover #item6 {
  transform: rotateZ(-10deg);
}

(1) #box:hover

• #box 是一个 ID 选择器，表示选中 HTML 中 id="box" 的元素。
• :hover 是一个伪类，表示当用户将鼠标悬停在该元素上时应用样式。
• #box:hover 的意思是：当鼠标悬停在 id="box" 的元素上时，触发相关的样式规则。

(2) #item6

• #item6 是另一个 ID 选择器，表示选中 HTML 中 id="item6" 的元素。
• #box:hover #item6 表示：当鼠标悬停在 #box 上时，选中 #box 内部的 #item6 元素。

2. 样式规则

transform: rotateZ(-10deg);

(1) transform 属性

• transform 是一个 CSS 属性，用于对元素进行变换操作（如旋转、缩放、移动等）。
• 在这里，transform 被用来对 #item6 进行旋转。

(2) rotateZ(-10deg)

• rotateZ 是 transform 的一个函数，表示围绕 Z 轴旋转。
• -10deg 表示逆时针旋转 10 度（负值为逆时针，正值为顺时针）。
• 因此，rotateZ(-10deg) 的意思是：让 #item6 元素围绕 Z 轴逆时针旋转 10 度。

 如果你不指定旋转轴（如 rotateX, rotateY, 或 rotateZ），则默认是围绕 Z 轴进行旋转。这意味着单独使用 rotate 实际上等同于 rotateZ。

---

扩展：js 做法

box.onmouseover = () => { for(let i = 1; i <=6; i++ ) { let item = document.querySelector(`#item${i}`) item.style.transform = `rotate(${-60+(i-1)*10}deg)` console.log(item) } for(let i = 7; i <=12; i++ ) { let item = document.querySelector(`#item${i}`) item.style.transform = `rotate(${(i-6)*10}deg)` console.log(item) }

代码逐行解析

1. box.onmouseover = () => { ... }

• 这是一个事件绑定，表示当用户将鼠标悬停在 box 元素上时，执行后面的箭头函数。
• onmouseover 是原生 DOM 的事件属性，类似于 addEventListener('mouseover', ...)。

2. 第一个 for 循环

for (let i = 1; i <= 6; i++) {
  let item = document.querySelector(`#item${i}`);
  item.style.transform = `rotate(${-60 + (i - 1) * 10}deg)`;
  console.log(item);
}

(1) for (let i = 1; i <= 6; i++)

• 循环从 i = 1 开始，到 i = 6 结束，总共循环 6 次。
• 每次循环处理一个 #itemX 元素（#item1 到 #item6）。

(2) let item = document.querySelector(#item${i})

• 使用模板字符串 `#item${i}` 动态生成选择器，例如：
  • 当 i = 1 时，选择器为 #item1。
  • 当 i = 2 时，选择器为 #item2。
• document.querySelector 返回匹配该选择器的第一个 DOM 元素。

(3) item.style.transform = rotate(${-60 + (i - 1) * 10}deg)``

• 设置 item 元素的 transform 样式，使其旋转一定的角度。
• -60 + (i - 1) * 10 是一个数学表达式，用于计算旋转角度：
  • 当 i = 1 时：-60 + (1 - 1) * 10 = -60，即旋转 -60deg。
  • 当 i = 2 时：-60 + (2 - 1) * 10 = -50，即旋转 -50deg。
  • 当 i = 3 时：-60 + (3 - 1) * 10 = -40，即旋转 -40deg。
  • 以此类推，直到 i = 6 时，旋转角度为 -10deg。

(4) console.log(item)

• 打印当前处理的 item 元素，方便调试和查看是否正确选择了目标元素。

3. 第二个 for 循环

for (let i = 7; i <= 12; i++) {
  let item = document.querySelector(`#item${i}`);
  item.style.transform = `rotate(${(i - 6) * 10}deg)`;
  console.log(item);
}

(1) for (let i = 7; i <= 12; i++)

• 循环从 i = 7 开始，到 i = 12 结束，总共循环 6 次。
• 每次循环处理一个 #itemX 元素（#item7 到 #item12）。

(2) let item = document.querySelector(#item${i})

• 同第一个循环，动态生成选择器并获取对应的 DOM 元素。

(3) item.style.transform = rotate(${(i - 6) * 10}deg)``

• 设置 item 元素的 transform 样式，使其旋转一定的角度。
• (i - 6) * 10 是一个数学表达式，用于计算旋转角度：
  • 当 i = 7 时：(7 - 6) * 10 = 10，即旋转 10deg。
  • 当 i = 8 时：(8 - 6) * 10 = 20，即旋转 20deg。
  • 当 i = 9 时：(9 - 6) * 10 = 30，即旋转 30deg。
  • 以此类推，直到 i = 12 时，旋转角度为 60deg。

(4) console.log(item)

• 同第一个循环，打印当前处理的 item 元素。