---

普通答案：

#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?元素。