Template:Transform
This template is used to transform content using CSS. It supports horizontally flipping, vertically mirroring, and rotating the content, in any order. The content can be an image, template, text, or any other wikitext, although the template is mainly intended to transform images, or templates that display images alone.
The transformation happens at the center of the whole object and its effective dimensions will retain the original values of the object as if untransformed, so the position and padding may be adjusted to avoid unwanted overlapping.
Note that this template does not support Internet Explorer 8 or even older browsers, as that requires cumbersome calculating of matrices.
Usage
{{ transform | <content> | flip = y/yes | mirror = y/yes | rotation = <degrees> | scale = <factor> | display = <CSS display property> | style = <additional custom styling> }}
- First unnamed parameter
Element to be transformed.
- flip
Flips element horizontally.
- mirror
Mirrors element vertically.
- rotation
Rotation in degrees (clockwise). For best results, use only 90, 180, and 270 degree rotations.
- scale
Scales the image.
is normal size, 1
half size, etc.
0.5
- display
CSS
property, defaults to display
.
inline-block
- style
Additional custom styling if required, applied before the transformations.
Examples
Code | Result |
---|---|
{{transform|[[File:Megashark.png]]|mirror=y}} |
|
{{transform|{{item|mode=image|Guide}}|rotation=90}} |
|
{{transform|{{important}}|flip=y}} |
Important: No note provided. |
{{transform|{{3DS version}}|mirror=y}} |
|
{{transform|[[Tree]]|rotation=90}} |
|
{{transform|[[File:Dryad.png]]|flip=y}}
|
|
{{transform|[[File:Dryad.png]]|flip=y|mirror=y}}
|
|
{{transform|[[File:Dryad.png]]|flip=y|mirror=y|rotation=30}}
|
|
{{transform|[[File:Dryad.png]]|flip=y|rotation=30|mirror=y}}
|
|
|