Шаблон:Transform-rotate

[прагляд] [правіць] [гісторыя] [падстаронкі] [абнавіць]

 Дакументацыя

---

CSS код павароту элемента. Ужываецца ўнутры style="" HTML элемента як і іншыя CSS уласцівасці.

• першы безыменны параметр {{{1}}} для вугла павароту (у градусах). Дадатнае значэнне азначае паварот направа, адмоўнае налева.
• іменны параметр |display= дазваляе змяніць уласцівасці CSS. Яго значэнне па змоўчанні display: inline-block;

Прыклады

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.

Код	Вынік
Паварот літар:
<span style="{{Transform-rotate|90}}">A</span> <span style="{{Transform-rotate|180}}">B</span> <span style="{{Transform-rotate|270}}">C</span> <span style="{{Transform-rotate|360}}">D</span>	A B C D
Таксама можна ўжываць да лічбаў
<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>
Чырвоная лінія павернута на 30 градусаў
<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.

Каб пазбегнуць паломак старонак, дзе ўжыты гэты шаблон, пажадана эксперыментаваць у сваёй асабістай прасторы.