模板:Rotate

模板文件[檢視] [編輯] [歷史] [清除快取]

模板介紹

這是對各主要支援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度的紅色橫線。