HTMLCSSAnimation旋转动画的格式属性和旋转中心设置-html教程-PHP中文网

HTMLCSSAnimation旋转动画的格式属性和旋转中心设置

雪夜

发布： 2025-09-25 09:59:01

原创

423人浏览过

使用transform和@keyframes实现旋转动画，通过transform-origin设置旋转中心。示例：定义@keyframes改变transform:rotate()值，animation控制执行，如绕左上角旋转需设transform-origin:0 0。

htmlcssanimation旋转动画的格式属性和旋转中心设置

在使用 CSS 实现旋转动画时，主要依赖 transform 属性来完成元素的旋转效果，结合 @keyframes 定义动画关键帧。同时，可以通过 transform-origin 来设置旋转中心点。

1. 旋转动画的基本格式属性

实现一个旋转动画需要以下核心 CSS 属性：

animation：用于控制动画的整体行为，如名称、持续时间、重复次数等。
@keyframes：定义动画在不同时间点的状态，其中使用 transform: rotate() 实现旋转。
transform: rotate()：对元素进行旋转变换，单位为 deg（度）或 rad（弧度）。

示例代码：

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

.rotating-element {
  animation: spin 2s linear infinite;
}

登录后复制

这段代码让元素在 2 秒内匀速无限循环旋转一周。

2. 设置旋转中心（transform-origin）

默认情况下，元素围绕自身的中心点（50% 50%）旋转。通过 transform-origin 可以更改旋转中心位置。

百度文心百中

百度大模型语义搜索体验中心

查看详情

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

可使用关键词：如 center、left、right、top、bottom。
可使用百分比：如 0% 0% 表示左上角。
可使用具体长度：如 10px 20px。

示例：围绕左上角旋转

.rotating-element {
  transform-origin: 0 0;
  animation: spin 2s linear infinite;
}

登录后复制

常见设置：

transform-origin: center center; — 中心（默认）
transform-origin: left top; — 左上角
transform-origin: 50% 0; — 上边缘中点
transform-origin: right bottom; — 右下角

3. 组合使用建议

为了获得更自然的视觉效果，尤其是图标、指针类元素，应根据设计需求合理设置旋转中心。例如，一个指南针指针应围绕其固定端点旋转。

完整示例：围绕左端点旋转的指针

@keyframes rotate-pointer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

.pointer {
  transform-origin: left center;
  animation: rotate-pointer 1s ease-in-out;
}

登录后复制

基本上就这些。掌握 rotate() 和 transform-origin 的配合，就能灵活控制各种旋转动画的效果。不复杂但容易忽略细节。

以上就是HTMLCSSAnimation旋转动画的格式属性和旋转中心设置的详细内容，更多请关注php中文网其它相关文章！