模板: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度的红色横线。