如何在CSS中实现元素旋转动画_transform rotate应用-css教程-PHP中文网

如何在CSS中实现元素旋转动画_transform rotate应用

P粉602998670

发布： 2025-11-30 19:47:02

原创

604人浏览过

答案：CSS通过transform的rotate()结合@keyframes和animation实现旋转动画。.box{transform:rotate(45deg)}可旋转元素；.spin{animation:rotateAnimation 2s infinite}定义每2秒转一圈的动画；通过transform-origin可改变旋转中心点，如top center实现钟摆效果；常见应用有加载动画、悬停效果等，如.loader通过border和rotate制作旋转圆环加载提示。

如何在css中实现元素旋转动画_transform rotate应用

在CSS中实现元素旋转动画，主要依靠 transform 属性中的 rotate() 函数，结合 @keyframes 和 animation 属性来创建平滑的动画效果。下面详细介绍具体用法和常见应用场景。

1. 基础语法：使用 transform rotate

transform: rotate(angle) 可以让元素围绕其中心点进行旋转。角度单位可以是 deg（度）、rad（弧度）、grad（梯度）或turn（圈数）。

例如：

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

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

登录后复制

该属性不会影响页面布局，只改变视觉呈现。

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

2. 创建旋转动画：结合 @keyframes

要实现持续的旋转动画，需要定义关键帧动画。

示例：让一个盒子持续旋转一圈

.spin {
  animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

登录后复制

这段代码会让元素每2秒完成一次完整旋转，并无限重复。

秒哒

秒哒-不用代码就能实现任意想法

349

查看详情

3. 控制旋转中心点：transform-origin

默认情况下，元素围绕自己的中心点（50% 50%）旋转。你可以通过 transform-origin 修改旋转原点。

常用设置：

transform-origin: center top; —— 围绕顶部中心旋转
transform-origin: 0 0; —— 围绕左上角旋转
transform-origin: right bottom; —— 围绕右下角旋转

例如模拟钟摆效果，可设置旋转点在上方：

.pendulum {
  transform-origin: top center;
  animation: swing 1s ease-in-out infinite alternate;
}

@keyframes swing {
  to {
    transform: rotate(30deg);
  }
}

登录后复制

4. 实际应用示例

常见的使用场景包括加载动画、按钮悬停效果、图标旋转等。

加载动画示例：

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

登录后复制

这个“旋转圆环”常用于页面加载提示。

基本上就这些。掌握 transform 与 animation 的配合，就能灵活实现各种旋转动效，关键是理解 rotate 的角度变化和动画时间控制。

以上就是如何在CSS中实现元素旋转动画_transform rotate应用的详细内容，更多请关注php中文网其它相关文章！