Skabelon:Transform-rotate
A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.
- First unnamed parameter
{{{1}}}for rotation angle (in degree). Positive values rotate right, negative values rotate left. - The named parameter
|display=allows you to change the CSS display property. It defaults todisplay: inline-block;
When using this template to create the rotating effect, editors should consider carefully about the accessibility.
Note: This template does not support IE8 or older. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into Lua.
Eksempler
The rotating happens at the center of the object and its effective dimensions will retain the original values of the object as if unrotated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display= parameter to further control positioning.
| Syntax | Result |
|---|---|
| |
<span style="{{Transform-rotate|90}}">A</span> <span style="{{Transform-rotate|180}}">B</span> <span style="{{Transform-rotate|270}}">C</span> <span style="{{Transform-rotate|360}}">D</span>
|
A B C D |
| |
<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}}">This text<br />is vertically<br />aligned.</span><br /> <br /><span style="{{Transform-rotate|-180}}">This text is upside down.</span>
|
This text is vertically aligned. This text is upside down. |
| |
<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[file:Image PlaceHolder.png|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. |
Se også
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.
Index:
pl ar de en es fr it arz nl ja pt ceb sv uk vi war zh ru af ast az bg zh-min-nan bn be ca cs cy da et el eo eu fa gl ko hi hr id he ka la lv lt hu mk ms min no nn ce uz kk ro simple sk sl sr sh fi ta tt th tg azb tr ur zh-yue hy my ace als am an hyw ban bjn map-bms ba be-tarask bcl bpy bar bs br cv nv eml hif fo fy ga gd gu hak ha hsb io ig ilo ia ie os is jv kn ht ku ckb ky mrj lb lij li lmo mai mg ml zh-classical mr xmf mzn cdo mn nap new ne frr oc mhr or as pa pnb ps pms nds crh qu sa sah sco sq scn si sd szl su sw tl shn te bug vec vo wa wuu yi yo diq bat-smg zu lad kbd ang smn ab roa-rup frp arc gn av ay bh bi bo bxr cbk-zam co za dag ary se pdc dv dsb myv ext fur gv gag inh ki glk gan guw xal haw rw kbp pam csb kw km kv koi kg gom ks gcr lo lbe ltg lez nia ln jbo lg mt mi tw mwl mdf mnw nqo fj nah na nds-nl nrm nov om pi pag pap pfl pcd krc kaa ksh rm rue sm sat sc trv stq nso sn cu so srn kab roa-tara tet tpi to chr tum tk tyv udm ug vep fiu-vro vls wo xh zea ty ak bm ch ny ee ff got iu ik kl mad cr pih ami pwn pnt dz rmy rn sg st tn ss ti din chy ts kcg ve
