Template:TRotate
From MansunWiki
Revision as of 19:35, 16 August 2015 by DarkMavis (Talk | contribs) (Created page with "<includeonly>display: {{{display|inline-block}}}; -moz-transform: rotate({{{1|0}}}deg); -ms-transform: rotate({{{1|0}}}deg); -o-transform: rotate({{{1|0}}}deg); -webkit-transf...")
This documentation is transcluded from Template:TRotate/doc. (edit | history)
Note to editors: Please don't categorize this template by editing it directly. Instead, place the category in its documentation page, in its "includeonly" section.
Note to editors: Please don't categorize this template by editing it directly. Instead, place the category in its documentation page, in its "includeonly" section.
A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style=""
attribute of HTML elements like other CSS properties.
- Sourced from wikipedia: https://en.wikipedia.org/wiki/Template:Transform-rotate
- First unnamed parameter
{{{1}}}
for rotation angle (in degree). Positive values rotate right, negative values rotate left. - The named parameter
|display=
allows you to change the CSS display property. It defaults todisplay: inline-block;
When using this template to create the rotating effect, editors should consider carefully about the accessibility.
Template:A note This template does not support IE8 or older. 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 |
---|---|
| |
<span style="{{TRotate|90}}">A</span> <span style="{{TRotate|180}}">B</span> <span style="{{TRotate|270}}">C</span> <span style="{{TRotate|360}}">D</span>
|
A B C D |
| |
<span style="{{TRotate|0}}">0</span> <span style="{{TRotate|10}}">1</span> <span style="{{TRotate|20}}">2</span> <span style="{{TRotate|30}}">3</span> <span style="{{TRotate|40}}">4</span> <span style="{{TRotate|50}}">5</span> <span style="{{TRotate|60}}">6</span> <span style="{{TRotate|70}}">7</span> <span style="{{TRotate|80}}">8</span> <span style="{{TRotate|90}}">9</span>
|
0 1 2 3 4 5 6 7 8 9 |
| |
<span style="{{TRotate|-90}}">This text<br />is vertically<br />aligned.</span><br /> <br /><span style="{{TRotate|-180}}">This text is upside down.</span>
|
This text is vertically aligned. This text is upside down. |
| |
<div style="position:relative; top:0px; left:0px; {{TRotate|90|display=block}}">[[file:Image PlaceHolder.png|200px]]</div>
|
|
| |
<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{TRotate|-30|display=block}}"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; display: block; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |