Example:旋转变换

一个可自定义符号、角度、方向与节奏的旋转变换组件，每次转动带浮起放大再落下的缓动效果。

最简调用

只写符号，其余使用默认值：

{{旋转变换
| 符号 = ◬
}}

效果：

◬

完整调用示例

{{旋转变换
| 符号     = ◬
| 大小     = 3
| 符号字体 = rubik
| 符号颜色 = inherit
| 转动角   = 90
| 方向     = 顺时针
| 转动时长 = 0.6
| 转动间隔 = 2
| 浮起高度 = 2
| 放大比例 = 1.15
| 呼吸     = on
| 发光     = off
| 频率     = 2
| 发光颜色 = #8b1a2b
}}

效果：

◬

逆时针大角度

{{旋转变换
| 符号     = ⟳
| 大小     = 2
| 方向     = 逆时针
| 转动角   = 180
| 转动时长 = 1
| 转动间隔 = 4
}}

效果：

⟳

呼吸 + 发光

{{旋转变换
| 符号     = ◆
| 大小     = 2
| 转动角   = 90
| 转动间隔 = 2.5
| 浮起高度 = 4
| 放大比例 = 1.3
| 呼吸     = on
| 发光     = on
| 频率     = 1.5
| 发光颜色 = #c73251
}}

效果：

◆

参数说明

参数	可选值	默认	说明
符号	任意字符或符号	◬	转动的符号
大小	任意数字	3	符号字号，单位 em，只写数字
符号字体	字体类后缀，如 rubik、noto、cinzel、tesla、ballet、college、chrontor、mono	rubik	符号字体
符号颜色	任意颜色值或 inherit	inherit	符号颜色，不传则继承页面文字色
转动角	任意数字	90	单次转动的角度，单位 deg，只写数字
方向	顺时针 / 逆时针	顺时针	转动方向
转动时长	任意数字	0.6	单次转动过程耗时，单位秒，只写数字
转动间隔	任意数字	2	两次转动之间的间隔，单位秒，只写数字
浮起高度	任意数字	2	转动过程中向上浮起的像素距离，只写数字
放大比例	任意数字	1.15	转动过程中的最大放大倍数
呼吸	on / off	on	是否呼吸显隐
发光	on / off	off	是否边缘发光
频率	任意数字	2	呼吸与发光周期，单位秒，只写数字
发光颜色	任意颜色值	#8b1a2b	发光颜色，仅发光开启时生效

注意事项

组件采用累积旋转：每次转动结束后保留当前角度，下次从此角度继续转动，不会回到初始位置。
单次转动包含三段动作：加速转起 → 中途浮起放大 → 减速落下。由 JS 的 Web Animations API 驱动，ease-in-out 缓动。
「转动间隔」必须大于「转动时长」，否则上一次转动未完成时下一次已开始，会形成连续旋转。
转动期间静止的时间为「转动间隔」减「转动时长」。例如默认值下，静止 1.4 秒、转动 0.6 秒。
旋转和呼吸/发光分别由外层和内层两个 span 承载，各自独立，可同时生效。
字体类来自 MediaWiki:Citizen.css，详见 Example:字体调用。
旋转逻辑由 MediaWiki:Common.js 绑定，样式类 fx-rotate 定义在 MediaWiki:Common.css。