鼠标悬停时文本旋转效果失效问题求助

问题出在transform: rotate()的语法上——你给角度值加了单引号，这不符合CSS语法规范，浏览器无法识别这个无效值，导致旋转效果完全不生效。

修正后的CSS代码 #

.dot {
  height: 100px;
  width: 100px;
  background-color: #ffeaa7;
  border-radius: 50%;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative;
  text-align: center; 
  margin: 2px;
  filter: brightness(30%);
  transition: 0.5s;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',  Geneva, Verdana, sans-serif;
  font-size: 30px;
  transform: rotate(0deg); /* 移除多余的单引号 */
}

.dot:hover{
  filter: brightness(100%);
  font-size: 65px;
  transform: rotate(45deg); /* 移除多余的单引号 */
}

关键说明 #

• CSS中rotate()函数的角度参数不需要用引号包裹，直接书写45deg这类格式即可，加引号会被浏览器判定为无效值。
• 初始样式里的rotate(0deg)可以省略，因为元素默认就是旋转0度的状态，保留也不会影响效果。

内容的提问来源于stack exchange，提问作者Roedie