答案：通过CSS的transition和transform属性可实现元素旋转动画。首先创建一个块级元素，设置宽高、背景等基础样式，并添加transition: transform 0.5s ease实现平滑过渡。然后利用:hover伪类触发transform: rotate(180deg)使元素旋转180度。可通过transform-origin调整旋转中心点，或使用rotateY(180deg)实现3D翻转效果。关键在于正确设置过渡属性并绑定状态变化，否则动画无法生效。
要实现元素的旋转动画，可以通过 CSS 的 transition 和 transform 属性配合使用。当元素的状态发生改变（比如鼠标悬停）时，平滑地过渡到旋转状态。
1. 基础结构：定义元素
先创建一个需要旋转的块级元素，比如一个方块：
2. 设置基础样式和过渡效果
给元素设置基本样式，并添加 transition 来控制旋转的变化过程：
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 100px auto;
cursor: pointer;
/ 添加过渡：指定 transform 属性在 0.5 秒内缓动变化 /
transition: transform 0.5s ease;
}
3. 定义旋转状态
使用 :hover 或 :focus 等状态触发旋转。例如鼠标悬停时旋转 180 度：
立即学习“前端免费学习笔记（深入）”；
.box:hover {
transform: rotate(180deg);
}
这样，当鼠标移到元素上时，它会以平滑动画的方式旋转半圈。
4. 可选：自定义旋转中心或三维旋转
默认旋转中心是元素中心，可通过 transform-origin 修改：
.box {
transform-origin: top left;
}
也可以使用三维旋转：
.box:hover {
transform: rotateY(180deg);
}
rotateY 实现绕 Y 轴翻转，常用于卡片翻面效果。
基本上就这些。关键是结合 transition 控制动画时长与节奏，用 transform: rotate() 定义目标角度，再通过状态变化触发动画。不复杂但容易忽略细节，比如忘记设 transition 或写错属性名。
