Template:Transform-scale

The following documentation is located at Template:Transform-scale/doc. [<Edit> Template:Transform-scale/doc]
[⧼Purge⧽ Template:Transform-scale]

The {{transform-scale}} cross-browser compatibility template gives the CSS code for scaling and/or flipping elements inside the style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

Usage

<span style="{{transform-scale|scaling factor along X|scaling factor along Y}}">element to scale and/or flip</span>

or

<span style="{{transform-scale|scaling factor along X|scaling factor along Y|display = display}}">element to scale and/or flip</span>

with arguments

• scaling factor along X: first unnamed parameter {{{1|0}}} for scaling along X (default 1.0).

Negative values also flip along X.

• scaling factor along Y: second unnamed parameter {{{2|0}}} for scaling along Y (default 1.0).

Negative values also flip along Y.

• display: the named parameter display allows you to change the CSS display property. It defaults to inline-block;.

When using this template to create the scaling effect, editors should consider carefully about the accessibility.

Note: This template is not supported by IE8 or older. IE8 requires cumbersome calculating of matrices.

Examples

The scaling happens at the center of the object's bounding box and it's effective dimensions will retain the original values of the object as if unscaled, so you may adjust the position and padding to avoid unwanted overlapping. Use the display parameter to further control positioning.

Syntax		Result
Some characters scaled and/or flipped along X:
<span style="{{transform-scale|-1.5}}">A</span> <span style="{{transform-scale|-0.75}}">B</span> <span style="{{transform-scale|0.0}}">C</span> <span style="{{transform-scale|0.75}}">D</span> <span style="{{transform-scale|1.5}}">E</span>		A B C D E
Some characters scaled and/or flipped along Y:
<span style="{{transform-scale|1.0|-1.5}}">A</span> <span style="{{transform-scale|1.0|-0.75}}">B</span> <span style="{{transform-scale|1.0|0.0}}">C</span> <span style="{{transform-scale|1.0|0.75}}">D</span> <span style="{{transform-scale|1.0|1.5}}">E</span>		A B C D E
Some special characters scaled and/or flipped along Y:
<span style="{{transform-scale|1.0|-5.0}}">∫</span> <span style="{{transform-scale|1.0|-2.5}}">∫</span> <span style="{{transform-scale|1.0|0.0}}">∫</span> <span style="{{transform-scale|1.0|2.5}}">∫</span> <span style="{{transform-scale|1.0|5.0}}">∫</span>		∫ ∫ ∫ ∫ ∫
This is a placeholder image. It is unscaled.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|1.0|1.0|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is scaled along X.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|1.25|1.0|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is scaled along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|1.0|1.25|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is scaled along X and Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|0.75|1.25|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is flipped along X.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|-1.0|1.0|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is flipped along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-scale|1.0|-1.0|display = block}}">[[File:Clockface.png|200px]]</div>
This is a scaled text, also flipped along X
<div style="border: 3px solid red; width: 150px; position: relative; top: 50px; opacity: 0.5; {{transform-scale|-0.75|1.25|display = block}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

See also

• {{transform-translate}}
• {{transform-scale}} ({{flipX}} and {{flipY}})
• {{transform-rotate}}
• {{transform-skew}}
• {{transform}}

External links

• https://docs.webplatform.org/wiki/tutorials/css_transforms