Šablona:Otočit

Dokumentace  

Otočit může být použita k...

Použití

Zkrácený CSS kód pro rotaci prvků uvnitř atributu stylu. Použijte jej v atributu style="" prvků HTML jako jiné vlastnosti CSS.

• První nepojmenovaný parametr {{{1}}} pro úhel otočení (ve stupních). Kladné hodnoty se otáčejí doprava, záporné doleva.
• Pojmenovaný parametr |display vám umožňuje změnit vlastnost zobrazení CSS. Výchozí hodnota je display: inline-block;

Při použití této šablony k vytvoření rotačního efektu by editoři měli pečlivě zvážit accessibility.

Šablona:A note Tato šablona nepodporuje IE8 nebo starší. IE8 vyžaduje těžkopádné výpočty matic. Můžete jej implementovat do této šablony, pokud víte, jak přeložit vzorec do Lua.

Příklady

Otáčení se děje ve středu objektu a jeho efektivní rozměry si zachovají původní hodnoty objektu, jako by nebyly otočeny, takže můžete upravit polohu a odsazení, abyste zabránili nechtěnému překrývání. Pro další ovládání polohy použijte parametr display=.

Syntaxe	Výsledek
Některé otočené znaky:
<span style="{{Otočit|90}}">5</span> <span style="{{Otočit|180}}">5</span > <span style="{{Otočit|270}}">5</span> <span style="{{Otočit|360}}">5</span>	5 5 5 5
Některé otočené speciální znaky (užitečné, když rodina písem nemá žádné kurzíva nebo šikmé písmo):
<span style="font-size: 1.4em; {{Otočit|0}}">∫</span> <span style="font-size: 1.4em; { {Otočit|20}}">∫</span> <span style="font-size: 1.4em; {{Otočit|40}}">∫</span> <span style="font- velikost: 1,4 em; {{Otočit|60}}">∫</span>	∫ ∫ ∫ ∫
Funguje i s čísly
<span style="{{Otočit|0}}">0</span> <span style="{{Otočit|10}}">1</span > <span style="{{Otočit|20}}">2</span> <span style="{{Otočit|30}}">3</span> <span style="{{ Otočit|40}}">4</span> <span style="{{Otočit|50}}">5</span> <span style="{{Otočit|60}}" >6</span> <span style="{{Otočit|70}}">7</span> <span style="{{Otočit|80}}">8</span> <span style="{{Otočit|90}}">9</span>	0 1 2 3 4 5 6 7 8 9
Nebo s libovolným textem
<span style="{{Otočit|-90}}">Tento text<br />je svisle<br />zarovnán.</span><br />&nbsp; <br /><span style="{{Otočit|-180}}">Tento text je obrácený.</span>	Tento text je svisle zarovnán.   Tento text je vzhůru nohama.
Toto je zástupný obrázek, je otočený o 90 stupňů ve směru hodinových ručiček.
<div style="position:relative; top:0px; left:0px; {{Otočit|90|display=block}}">[[file:Image PlaceHolder.png| 200px]]</div>
Toto je červená vodorovná čára nakreslená přes text pod úhlem 30 stupňů proti směru hodinových ručiček.
<div style="border:3px plná červená; width:150px; position:relative; top:50px; opacity:0.5; {{Otočit|-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