Template:Transform-rotate/doc

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. Also the rotation can only be applied for div object, it no longer affects the object nested by span.

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:` `<div style="position:relative; top:150px; left:-60px; {{rotate\|90}}">[[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}}"/>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.