Template:Transform-rotate/doc: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
{{Documentation subpage}} |
{{Documentation subpage}} |
||
<!-- Categories and interwikis go at the bottom of this page. --> |
<!-- Categories and interwikis go at the bottom of this 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. |
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 [[WP:accessibility|accessibility]]. |
When using this template to create the rotating effect, editor should consider carefully about the [[WP:accessibility|accessibility]]. |
||
Revision as of 01:21, 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. 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:
|
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.
|