跳转到内容

Template:Rotate/doc:修订间差异

维基百科,自由的百科全书
删除的内容 添加的内容
Liangent-bot留言 | 贡献
Nbdd0121留言 | 贡献
维护清理
 
(未显示另一用户的1个中间版本)
第22行: 第22行:
它順時針旋轉了90度。
它順時針旋轉了90度。
|-valign=top
|-valign=top
|<code><nowiki><div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"/>這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。</nowiki></code>
|<code><nowiki><div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"></div>這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。</nowiki></code>
|<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"/>這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。
|<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"></div>這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。
|}
|}


第29行: 第29行:
<!-- 本行下加入模板的分類 -->
<!-- 本行下加入模板的分類 -->
[[Category:跨瀏覽器兼容性模板]]
[[Category:跨瀏覽器兼容性模板]]
[[Category:圖像模板]]

<!-- 本行下加入模板的跨語言鏈接 -->
[[en:Template:Rotate]]
[[ru:Шаблон:Rotate]]

</includeonly>
</includeonly>

2016年9月4日 (日) 11:36的最新版本

模板介紹

[编辑]

這是對各主要支援CSS旋轉的瀏覽器的捷徑模板,應用於style屬性內,{{{1}}}則決定旋轉角度,可以輸入負數進行逆時針旋轉。本模板不支援IE8或更舊的瀏覽器,IE8本身需要計算複雜的matrix定義,如你懂得將其算式轉換成Wiki的parser歡迎追加。

使用本模板或旋轉本身的代碼時編者應該慎重考慮無障礙瀏覽的問題避免影響到瀏覽器不支援旋轉的讀者。

範例

[编辑]

旋轉是以被包含物件的正中央旋轉,旋轉後物件的有效範圍是依從旋轉前的範圍判斷,所以編者可能要補設定top/left的位置或padding避免不必要的覆蓋。

代碼 效果
這是個填充料圖像:

<div style="position:relative; top:150px; left:-60px; {{rotate|90}}">[[file:placeholder.png|200px]]</div>

它順時針旋轉了90度。

這是個填充料圖像:

它順時針旋轉了90度。

<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"></div>這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。
這是一條覆蓋在文字上、逆時針旋轉30度的紅色橫線。