蓝桥杯（Web大学组）2022省赛真题：展开你的扇子

思路：

  transform-origin: center bottom;使盒子旋转时，以底部的中心为坐标原点（题目已给出）

对每个盒子使用transform: rotate();实现旋转

笔记：

设置悬浮旋转时， #box div:hover #item6{ }        为什么加了div就不起作用？

这个 CSS 选择器的写法是有问题的， #item6 是#box div的后代且 #box 的子孙时才有效

代码：

#box {
  width: 300px;
  height: 440px;
  margin: 100px auto;
  position: relative;
}

#item1,
#item12 {
  background-color: #90e0ef;
}
#item2,
#item8 {
  background-color: #8bdb81;
}
#item3,
#item10 {
  background-color: yellowgreen;
}
#item4,
#item6 {
  background-color: skyblue;
}
#item5,
#item9 {
  background-color: #d9d7f1;
}
#item7,
#item11 {
  background-color: #fed1f1;
}
#box div {
  width: 100%;
  height: 400px;
  transition: all 1.5s;
  position: absolute;
  left: 0;
  top: 0;
  /*旋转时，以盒子底部的中心为坐标原点*/
  transform-origin: center bottom;
  box-shadow: 0 0 3px 0 #666;
}
/*TODO：请补充 CSS 代码*/

/* 为什么加了div就不起作用？ */
/* #box div:hover #item6{ */

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

#box:hover #item7{
  transform: rotate(10deg);
}
#box:hover #item8{
  transform: rotate(20deg);
}
#box:hover #item9{
  transform: rotate(30deg);
}
#box:hover #item10{
  transform: rotate(40deg);
}
#box:hover #item11{
  transform: rotate(50deg);
}
#box:hover #item12{
  transform: rotate(60deg);
}