答案：通过:hover与::before结合transform实现鼠标悬停时元素旋转及背景色变化。1. 设置.box基础样式并启用transition；2. 利用.box::before创建绝对定位伪元素，初始opacity为0；3. 在:hover中对主元素应用rotate(15deg)，同时使伪元素opacity为1并rotate(180deg)；4. 通过z-index控制图层顺序确保视觉效果正确。全过程不改动DOM结构，依赖CSS伪元素与变换完成动态表现。
当需要实现一个CSS元素在鼠标悬停时旋转并改变背景色，可以结合 :hover 和 ::before 伪元素配合 transform 来完成。这种方式适合在不破坏原始结构的前提下添加动态视觉效果。
1. 基本结构与基础样式
先定义一个容器元素，比如一个 div，设置基本尺寸和定位，为后续使用伪元素做准备。
.box {
width: 100px;
height: 100px;
position: relative;
background-color: #3498db; /* 初始背景色 */
transition: transform 0.3s ease;
}
2. 使用 ::before 添加覆盖层
通过 ::before 创建一个覆盖整个元素的伪元素，用于表现“背景色变化”和参与旋转动画。
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e74c3c; /* 悬停时的背景色 */
transform: rotate(0deg);
transform-origin: center;
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
}
这里将伪元素默认隐藏（opacity: 0），并在 hover 时显现。
立即学习“前端免费学习笔记（深入）”；
3. hover 时触发旋转和颜色显示
当鼠标悬停在元素上时，让伪元素显示并旋转，同时主元素也可以配合旋转。
.box:hover {
transform: rotate(15deg); /* 整体旋转 */
}
<p>.box:hover::before {
opacity: 1;
transform: rotate(180deg); /<em> 伪元素独立旋转 </em>/
}</p>这样，鼠标移入时，整个盒子轻微旋转，内部的伪元素从0度转到180度，同时红色背景显现，形成动态变色加旋转的效果。
4. 可选：仅用伪元素实现背景切换
如果不想改变原元素背景，只想通过伪元素“覆盖”出新颜色，可保持原背景不变，靠 z-index 控制层级。
确保 ::before 在 hover 时覆盖内容，可通过调整 z-index 或使用 background 叠加实现更复杂效果。
基本上就这些。利用 :hover 触发状态变化，结合 ::before 的独立变换能力，能灵活实现旋转与变色动画，且不影响DOM结构。不复杂但容易忽略细节如 transform-origin 和 position: absolute 的配合。
