Template:Transform-rotate/doc

A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

• First unnamed Parameter {{{1}}} for rotation angle (in degree). Positive values rotate right, negative values rotate left.
• Second named Parameter display= allows to change the CSS display property. It defaults to display: inline-block;

When using this template to create the rotating effect, editors should consider carefully about the accessibility.

 Note: This template does not support IE8 or older browsers. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into Lua.

Examples

The rotating happens at the center of the object and its effective dimensions will retain the original values of the object as if unrotated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display= parameter to further control positioning.

Syntax	Result
*Some rotated characters:<br /><span style="{{rotate|90}}">A</span> <span style="{{rotate|180}}">B</span> <span style="{{rotate|270}}">C</span> <span style="{{rotate|360}}">D</span> *Works with numbers, too:<br /><span style="{{rotate|0}}">0</span> <span style="{{rotate|10}}">1</span> <span style="{{rotate|20}}">2</span> <span style="{{rotate|30}}">3</span> <span style="{{rotate|40}}">4</span> <span style="{{rotate|50}}">5</span> <span style="{{rotate|60}}">6</span> <span style="{{rotate|70}}">7</span> <span style="{{rotate|80}}">8</span> <span style="{{rotate|90}}">9</span> *Or with arbitrary text:<br /><span style="{{rotate|-90}}">This text<br />is vertically<br />aligned.</span><br /> <br /><span style="{{rotate|-180}}">This text is upside down.</span>	Some rotated characters: A B C D Works with numbers, too: 0 1 2 3 4 5 6 7 8 9 Or with arbitrary text: This text is vertically aligned.   This text is upside down.
This is a placeholder image: <div style="position:relative; top:150px; left:-60px; {{rotate|90|display=block}}">[[file:placeholder.png|200px]]</div> It is rotated 90 degree clockwise.	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|display=block}}"/>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.

See also:

template:MirrorH