Ŝablono:Transform-rotate/dokumentado

Jen mallongigita CSS-kodo por turni elementojn per style-atributo. Uzu ĝin en la style=""-atributo de HTML-elementoj kiel aliaj CSS-propraĵoj.

• Unu nenomita parametro {{{1}}} por turna angulo (en gradoj). Pozitivaj valoroj turnas dekstren, negativaj valoroj turnas maldekstren.
• La nomita parametro |display= ebligas al vi ŝanĝi la CSS-an display-propraĵon. Ĝia defaŭlto estas display: inline-block;.

Se vi uzas ĉi tiun ŝablonon por krei la turnan efikon, redaktoroj konsideru zorgeme la VP:alirebleco (en).

 Informo: Ĉi tiu ŝablono ne subtenas IE8 aŭ pli malnova. IE8 postulas maloportunan kalkuladon de matricoj. Vi povas efektivigi ĝin en ĉi tiun ŝablonon se vi scias kiel traduki la formulon en Lua.

Ekzemploj

La rotacio okazas ĉe la centro de la objekto kaj ĝiaj efikaj dimensioj konservos la originalajn valorojn de la objekto kvazaŭ nerotaciita, do vi povas alĝustigi la pozicion kaj remburaĵon por eviti nedeziratan interkovron. Uzu la parametron display= por plue kontroli poziciigon.

Sintakso	Rezulto
Kelkaj turnitaj literoj:
<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
Kelkaj turnitaj specialaj literoj (uzebla se la "font-family" ne havas kursivajn aŭ oblikvan "font"):
<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>	∫ ∫ ∫ ∫
Funkcias ankaŭ kun numeroj
<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
Aŭ kun iu ajn teksto
<span style="{{Transform-rotate|-90}}">Ĉi tiu teksto<br />estas vertikale<br />vicigita.</span><br />&nbsp;<br /><span style="{{Transform-rotate|-180}}">Ĉi tiu teksto estas renversita.</span>	Ĉi tiu teksto estas vertikale vicigita.   Ĉi tiu teksto estas renversita.
Ĉi tio estas lokokupila bildo, Ĝi estas turnita 90 gradoj dekstren.
<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Example eo.svg|200px]]</div>
Ĉi tio estas ruĝa horizontala linio desegnita trans la teksto laŭ la angulo de 30 gradoj maldekstren.
<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.

Serioza cimo:

Sintakso	Rezulto
<span style="{{Transform-rotate|90}}">La teksto estos turnita, sed ne la spaco, kiun la teksto bezonas montri. Do la ĉelo ne estas sufiĉe alta, sed multe tro larĝa.</span>	La teksto estos turnita, sed ne la spaco, kiun la teksto bezonas montri. Do la ĉelo ne estas sufiĉe alta, sed multe tro larĝa.