Vidi fonton por Ŝablono:Transform-rotate/dokumentado

{{Ŝablona navigado}}
<!-- Categories and interwikis go at the bottom of this page. -->
Jen mallongigita [[CSS]]-kodo por turni elementojn per <code>style</code>-atributo. Uzu ĝin en la <code>style=""</code>-atributo de HTML-elementoj kiel aliaj CSS-propraĵoj.

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

Se vi uzas ĉi tiun ŝablonon por krei la turnan efikon, redaktoroj konsideru zorgeme la {{ill|trad=WP:accessibility|lingvo=en|eo=VP:alirebleco}}.

''{{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 [[Wikipedia:Lua|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 <code>display=</code> por plue kontroli poziciigon.

{|class=wikitable
!Sintakso!!Rezulto
|- style="vertical-align:top;"
|colspan=2|
*'''Kelkaj turnitaj literoj:'''
|-
|<syntaxhighlight lang="html"><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></syntaxhighlight>
|<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>
|-
|colspan=2|
*'''Kelkaj turnitaj specialaj literoj ''(uzebla se la "font-family" ne havas kursivajn aŭ oblikvan "font")'':'''
|-
|<syntaxhighlight lang="html"><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></syntaxhighlight>
|<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>
|-
|colspan=2|
*'''Funkcias ankaŭ kun numeroj'''
|-
|<syntaxhighlight lang="html"><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></syntaxhighlight>
|<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>
|-
|colspan=2|
*'''Aŭ kun iu ajn teksto'''
|-
|<syntaxhighlight lang="html"><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></syntaxhighlight>
|<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>
|-
|colspan=2|
*'''Ĉi tio estas lokokupila bildo, Ĝi estas turnita 90 gradoj dekstren.'''
|-style="vertical-align:top;"
|<syntaxhighlight lang="html"><div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Example eo.svg|200px]]</div></syntaxhighlight>
|<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Example eo.svg|200px]]</div>
|-
|colspan=2|
*'''Ĉi tio estas ruĝa horizontala linio desegnita trans la teksto laŭ la angulo de 30 gradoj maldekstren.'''
|-style="vertical-align:top;"
|<syntaxhighlight lang="html"><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.</syntaxhighlight>
|<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.
|}

Serioza cimo:

{|class=wikitable
!Sintakso!!Rezulto
|-
| <syntaxhighlight lang="html"><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></syntaxhighlight>
| <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>
|-
|}
<!--
==See also:==

* {{tl|MirrorH}}
* {{tl|transform}}
-->
<includeonly>
[[Kategorio:Ŝablono:Formatigo]]
[[Kategorio:Grafikaj ŝablonoj]]
</includeonly>