ထႅမ်းပလဵတ်ႉ:Transform-rotate
A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.
When using this template to create the rotating effect, editors should carefully consider the accessibility.
တူဝ်ယၢင်ႇ
[မႄးထတ်းငဝ်ႈငႃႇ]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="{{Transform-rotate|90}}">5</span> <span style="{{Transform-rotate|180}}">5</span> <span style="{{Transform-rotate|270}}">5</span> <span style="{{Transform-rotate|360}}">5</span>
|
5 5 5 5 |
| |
<span style="font-size: 1.4em; {{Transform-rotate|0}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|20}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|40}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|60}}">∫</span>
|
∫ ∫ ∫ ∫ |
| |
<span style="{{Transform-rotate|0}}">0</span> <span style="{{Transform-rotate|10}}">1</span> <span style="{{Transform-rotate|20}}">2</span> <span style="{{Transform-rotate|30}}">3</span> <span style="{{Transform-rotate|40}}">4</span> <span style="{{Transform-rotate|50}}">5</span> <span style="{{Transform-rotate|60}}">6</span> <span style="{{Transform-rotate|70}}">7</span> <span style="{{Transform-rotate|80}}">8</span> <span style="{{Transform-rotate|90}}">9</span>
|
0 1 2 3 4 5 6 7 8 9 |
| |
<span style="{{Transform-rotate|-90}}">This text<br />is vertically<br />aligned.</span><br /> <br /><span style="{{Transform-rotate|-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; {{Transform-rotate|90|display=block}}">[[file:Image PlaceHolder.png|200px]]</div>
|
 |
| |
<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Serious limitation:
| Syntax | Result |
|---|---|
<span style="{{Transform-rotate|90}}">The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.</span>
|
The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide. |
TemplateData
[မႄးထတ်းငဝ်ႈငႃႇ]ၶေႃႈမုၼ်းၸိူဝ်းၽၢႆႇတႂ်ႈၼႆႉ ပဵၼ် တူဝ်ထတ်းတႃႁၼ်(VisualEditor) ဢၼ်မီးတီႈ ဝီႇၶီႇၽီးတီးယႃးၼၼ်ႉ ယိူင်းဢၢၼ်း တႃႇဢဝ် ၶိူင်ႈၸိူဝ်းၼၼ်ႉ ၸႂ်ႉလႆႈတီႈ ဝီႇၶီႇၽီးတီးယႃးတႆးသေ ၸင်ႇလႆႈဢဝ် ပိူင် ၶေႃႈမုၼ်းထႅမ်းပလဵၵ်ႉ (TemplateData) ဢၼ်မီးတီႈ ဝီႇၶီႇၽီးတီးယႃး ဢိင်းၵလဵတ်ႈၼၼ်ႉ ႁဵတ်းဝႆႉပဵၼ် တီႈမၢႆတီႈတွင်းယဝ်ႉ။ ႁူမ်ႈဝႃႈ ပႆႇၸႂ်ႉၶိူင်ႈၸိူဝ်းၼၼ်ႉသေတႃႉ ပေႃးပဵၼ် ၵူၼ်းႁူႉလွင်ႈတႅမ်ႈပရူဝ်ႇၵရႅမ်ႇ (computer programming) ဢိတ်းဢွတ်းၵေႃႈ ႁႂ်ႈပေႃးႁၼ်လႆႈၸႅင်ႈလႅင်းလီၼႆသေ ၸၢင်ႈဢဝ်ၸႂ်ႉလႆႈ သၽေႃးတီႈၵႅပ်ႈမၼ်းလႆႈယူႇ။
Transform-rotate
No description.
| Parameter | ၶေႃႈသပ်းလႅင်း | Type | Status | |
|---|---|---|---|---|
| Rotation angle | 1 | Positive degrees rotate right, negative values rotate left
| Number | optional |
| CSS display | display | no description
| String | optional |
တူၺ်းပႃး
[မႄးထတ်းငဝ်ႈငႃႇ]- {{Rotate text}}
- {{MirrorH}}