Template:Transform-rotate
A shorthanded CSS code for rotating elements inside span or div. {{{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 virtual 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.
|
