查看“︁Example:旋转变换”︁的源代码

[[Template:旋转变换]]

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

==== 最简调用 ====

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

<pre>
{{旋转变换
| 符号 = ◬
}}
</pre>

效果：

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

==== 完整调用示例 ====

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

效果：

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

==== 逆时针大角度 ====

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

效果：

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

==== 呼吸 + 发光 ====

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

效果：

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

==== 参数说明 ====

{| class="wikitable"
! 参数 !! 可选值 !! 默认 !! 说明
|-
| 符号 || 任意字符或符号 || ◬ || 转动的符号
|-
| 大小 || 任意数字 || 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 驱动，<code>ease-in-out</code> 缓动。
* 「转动间隔」必须大于「转动时长」，否则上一次转动未完成时下一次已开始，会形成连续旋转。
* 转动期间静止的时间为「转动间隔」减「转动时长」。例如默认值下，静止 1.4 秒、转动 0.6 秒。
* 旋转和呼吸/发光分别由外层和内层两个 span 承载，各自独立，可同时生效。
* 字体类来自 [[MediaWiki:Citizen.css]]，详见 [[Example:字体调用]]。
* 旋转逻辑由 [[MediaWiki:Common.js]] 绑定，样式类 <code>fx-rotate</code> 定义在 [[MediaWiki:Common.css]]。