17370845950

CSS旋转通过transform: rotate()实现，用于元素二维旋转，正值顺时针、负值逆时针，配合transform-origin设置旋转中心点，并可结合transition或@keyframes实现动态效果。

CSS旋转属性主要通过 transform: rotate() 来实现，用来让元素绕其中心点或自定义原点进行旋转。理解它可以从作用方式、语法格式、旋转中心和实际应用几个方面入手。

rotate() 的基本用法

rotate() 是 transform 属性的一个函数，用于对元素进行二维旋转。角度单位常用的是“deg”（度）：

• 正数值表示顺时针旋转，例如 rotate(45deg) 表示顺时针转45度
• 负数值表示逆时针旋转，例如 rotate(-90deg) 表示逆时针转90度
• 也可以使用弧度（rad）、梯度（grad）或圈数（turn），如 rotate(0.5turn) 表示转半圈

旋转的中心点：transform-origin

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

• transform-origin: center top; 让元素以上边缘中点为轴旋转
• transform-origin: 0 0; 相当于左上角为旋转中心
• 值可以是关键字（left, right, top, bottom, center），也可以是具体像素或百分比

结合过渡与动画使用

单独设置 rotate 只是静态效果，通常配合 transition 或 @keyframes 实现动态旋转：

• 鼠标悬停缓慢旋转：transition: transform 0.3s ease;
• 持续自转动画：用 keyframes 定义从 rotate(0deg) 到 rotate(360deg)
• 注意：rotate 不会影响文档流，旋转后的元素仍占据原始空间

基本上就这些。掌握 rotate 和 transform-origin 的配合，再加一点动画逻辑，就能做出常见的加载图标、翻牌效果、指针转动等视觉交互。不复杂但容易忽略细节。