Šablona:Otočit
Vzhled
Otočit může být použita k...
Použití
[editovat zdroj]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 jedisplay: 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
[editovat zdroj]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 |
---|---|
| |
<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 |
| |
<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>
|
∫ ∫ ∫ ∫ |
| |
<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 |
| |
<span style="{{Otočit|-90}}">Tento text<br />je svisle<br />zarovnán.</span><br /> <br /><span style="{{Otočit|-180}}">Tento text je obrácený.</span>
|
Tento text je svisle zarovnán. Tento text je vzhůru nohama. |
| |
<div style="position:relative; top:0px; left:0px; {{Otočit|90|display=block}}">[[file:Image PlaceHolder.png| 200px]]</div>
|
|
| |
<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
|