如何用css设置元素旋转transform rotate

使用CSS transform属性的rotate()函数可实现元素旋转，如transform: rotate(45deg)表示顺时针旋转45度，支持deg、rad、turn单位，配合transform-origin可修改旋转中心点，结合transition可实现平滑动画效果，常用于悬停交互或视觉特效。

要让一个HTML元素旋转，可以使用CSS的 transform 属性配合 rotate() 函数。这个方法不会影响页面布局，只在视觉上改变元素的方向。

基本语法

transform: rotate(角度);

角度单位可以是：

• deg：度数（常用），如 90deg、180deg、-45deg
• rad：弧度，如 0.5rad
• turn：圈数，如 0.25turn 相当于 90deg

常见用法示例

给一个 div 元素顺时针旋转 45 度：

.box {
  transform: rotate(45deg);
}

逆时针旋转 30 度：

立即学习“前端免费学习笔记（深入）”；

.box {
  transform: rotate(-30deg);
}

旋转 180 度，常用于翻转图标或内容：

.flip {
  transform: rotate(180deg);
}

设置旋转中心点

默认情况下，元素围绕其中心点（50% 50%）旋转。你可以用 transform-origin 修改旋转原点：

• rotate around top-left: transform-origin: 0 0;
• rotate around bottom-right: transform-origin: 100% 100%;
• rotate around top center: transform-origin: 50% 0;

结合过渡实现动画效果

如果你想让旋转有平滑动画，可以加上 transition：

.box {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.box:hover {
  transform: rotate(90deg);
}

这样鼠标悬停时，元素会顺滑地旋转 90 度。

基本上就这些。掌握 rotate 和 transform-origin，就能灵活控制元素的旋转方向和支点。不复杂但容易忽略细节，比如单位写错或忘记加 deg 单位会导致无效。调试时注意检查拼写和单位。