跳转到内容

Template:Rotate/doc:修订间差异

维基百科,自由的百科全书
删除的内容 添加的内容
无编辑摘要
第28行: 第28行:
<includeonly>
<includeonly>
<!-- 本行下加入模板的分類 -->
<!-- 本行下加入模板的分類 -->
[[Category:Graphic templates]]
[[Category:格式模板]]


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


</includeonly>
</includeonly>

2012年3月28日 (三) 01:41的版本

模板介紹

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

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

範例

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

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

<span style="position:relative; top:20px; left:120px; {{rotate|90}}">[[file:placeholder.png|200px]]</span>

它順時針旋轉了90度。

這是個填充料圖像:

它順時針旋轉了90度。

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