CSS 旋转动画效果实现 - 优化建议

<div id='box'>
<div id='item1'></div>
<div id='item2'></div>
</div>
<style>
/*TODO：请补充 CSS 代码*/
#box {
  margin: 100px 300px;
  position: relative;
}

#item1 {
  position: absolute;
  height: 400px;
  width: 200px;
  border-radius: 20px;
  transform-origin: bottom center;
  transition: all 2s;
  background: skyblue;
}

#item2 {
  position: absolute;
  height: 400px;
  width: 200px;
  border-radius: 20px;
  transform-origin: bottom center;
  transition: all 2s;
  background: purple;
}

#box:hover #item1 {
  transform: rotate(-60deg);
}

#box:hover #item2 {
  transform: rotate(-50deg);
}
</style>
<p>本页面的代码没有明显错误，但是需要注意以下几点：</p>
<ol>
  <li>在 CSS 中使用了伪类选择器 `:nth-child`，需要确保其支持的浏览器版本范围覆盖到目标用户群体。</li>
  <li>在 HTML 中只使用了两个子元素，因此在 CSS 中只需要针对这两个子元素进行样式设置即可，不需要使用 `[id^=item]` 这样的属性选择器。</li>
  <li>在 CSS 中使用了 `transform` 属性来实现旋转效果，需要注意其在不同浏览器中的前缀问题，可以使用 `autoprefixer` 等工具自动添加前缀。</li>
  <li>在 CSS 中使用了 `transition` 属性来实现动画效果，需要注意其在不同浏览器中的兼容性问题，可以使用 `@keyframes` 等方式来实现替代方案。</li>
</ol>