Ŝablono:Transform-rotate
Etoso
[antaŭrigardi] [redakti] [historio] [renovigi]
![Dokumentado](http://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Information.svg/20px-Information.svg.png)
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-andisplay
-propraĵon. Ĝia defaŭlto estasdisplay: inline-block;
.
Se vi uzas ĉi tiun ŝablonon por krei la turnan efikon, redaktoroj konsideru zorgeme la VP:alirebleco (en).
Lua.
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
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 |
---|---|
| |
<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 |
| |
<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>
|
∫ ∫ ∫ ∫ |
| |
<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}}">Ĉi tiu teksto<br />estas vertikale<br />vicigita.</span><br /> <br /><span style="{{Transform-rotate|-180}}">Ĉi tiu teksto estas renversita.</span>
|
Ĉi tiu teksto estas vertikale vicigita. Ĉi tiu teksto estas renversita. |
| |
<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Example eo.svg|200px]]</div>
|
|
| |
<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. |
Se vi havas demandon pri ĉi tiu ŝablono, tiam vi povas demandi en la ŝablonprojekta diskutejo. La Intervikiaj ligiloj estu metataj al Vikidatumoj. (Vidu Helpopaĝon pri tio.) |
![]() |
|