Template:Transform-rotate/doc: Difference between revisions
m iw |
|||
| Line 13: | Line 13: | ||
|width=50%|<code><nowiki>This is a placeholder image:</nowiki></code> |
|width=50%|<code><nowiki>This is a placeholder image:</nowiki></code> |
||
<code><nowiki>< |
<code><nowiki><div style="position:relative; top:150px; left:-60px; {{rotate|90}}">[[file:placeholder.png|200px]]</div></nowiki></code> |
||
<code><nowiki>It is rotated 90 degree clockwise.</nowiki></code> |
<code><nowiki>It is rotated 90 degree clockwise.</nowiki></code> |
||
|This is a placeholder image: |
|This is a placeholder image: |
||
< |
<div style="position:relative; top:150px; left:-60px; {{rotate|90}}">[[file:placeholder.png|200px]]</div> |
||
It is rotated 90 degree clockwise. |
It is rotated 90 degree clockwise. |
||
Revision as of 01:20, 12 June 2012
 | This is a documentation subpage for Template:Transform-rotate. It may contain usage information, categories and other content that is not part of the original template page. |
A shorthanded CSS code for rotating elements inside style attribute. {{{1}}} for rotating degree. It does not support IE8 or older browsers. IE8 requires cumbersome calculating of matrix. You may implement it if you know how to translate the formula into parser function.
When using this template to create the rotating effect, editor should consider carefully about the accessibility.
Examples
The rotating happens at the center of the object and its effective dimension will retain as the original angle after rotating, so you may adjust the position and padding to avoid unwanted overlapping.
| Syntax | Result |
|---|---|
This is a placeholder image:
|
This is a placeholder image:
 It is rotated 90 degree clockwise. |
<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{rotate|-30}}"/>This is a red horizontal line drawn across the text at the angle of 30 degree anticlockwise.
|
This is a red horizontal line drawn across the text at the angle of 30 degree anticlockwise.
|