一、核心实现方案（基础静态旋转）
使用CSS的transform属性配合rotate()函数，可直接让正方形向右旋转90度，核心代码如下：
/* 定义正方形样式 */
.square {
width: 100px;
height: 100px; /* 宽高相等确保是正方形 */
background-color: #3b82f6; /* 背景色用于可视化 */
transform: rotate(90deg); /* 向右旋转90度 */
}
- 关键属性：
transform: rotate(90deg)，其中90deg表示顺时针旋转90度（向右旋转）；若需逆时针，可用-90deg。 - 注意：
rotate()默认以元素中心点为旋转原点（可通过transform-origin修改，如transform-origin: top left设置左上角为原点）。
二、带过渡动画的旋转（提升交互体验）
实际场景中，旋转通常需要平滑过渡效果，可添加transition属性实现：
.square {
width: 100px;
height: 100px;
background-color: #3b82f6;
transition: transform 0.5s ease; /* 过渡动画：0.5秒完成，缓动效果 */
}
/* 触发条件：如hover时旋转 */
.square:hover {
transform: rotate(90deg); /* 鼠标悬停时向右旋转90度 */
}
- 优势：通过
transition让旋转过程平滑过渡，避免生硬的瞬间变化，提升用户体验。 - 应用场景：按钮点击反馈、菜单展开动画、卡片交互等。
三、自动旋转动画（循环执行）
若需要正方形自动向右旋转90度（如加载动画），可使用@keyframes定义动画：
.square {
width: 100px;
height: 100px;
background-color: #3b82f6;
animation: rotateRight 1s forwards; /* 1秒完成旋转，停在最终状态 */
}
/* 定义动画关键帧 */
@keyframes rotateRight {
from { transform: rotate(0deg); } /* 起始状态：0度 */
to { transform: rotate(90deg); } /* 结束状态：90度（向右旋转） */
}
- 参数说明：
animation属性中，forwards确保动画结束后停在to状态；若需循环旋转，可将forwards改为infinite。
四、问题
1. 问：如何修改旋转的中心点？
- 答：通过
transform-origin属性设置，例如：.square { transform-origin: top left; /* 以左上角为旋转原点 */ transform: rotate(90deg); /* 向右旋转时会围绕左上角转动 */ }
2. 问：旋转后元素占据的空间会变化吗？
- 答：不会。
transform属于“视觉变换”，不会改变元素在文档流中的位置和占据的空间（类似相对定位），避免影响其他元素布局。
3. 问：如何确保旋转后元素不模糊？
- 答：旋转可能导致边缘模糊，可添加
backface-visibility: hidden或will-change: transform优化渲染：.square { backface-visibility: hidden; /* 提升渲染性能，减少模糊 */ will-change: transform; /* 告知浏览器提前优化变换 */ }
五、总结
“用CSS实现正方形向右旋转90度的核心是transform: rotate(90deg)：
- 静态旋转直接设置
rotate(90deg)； - 交互场景下，配合
transition实现平滑过渡（如hover触发）； - 自动旋转则通过
@keyframes定义动画，控制旋转过程。
实际开发中，需根据需求选择是否添加过渡效果，并注意旋转原点和渲染性能的优化。”
