Template:Transform-translate

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

The {{transform-translate}} cross-browser compatibility template gives the CSS code for translating elements inside the style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

Usage

<span style="{{transform-translate|translating value along X|translating value along Y}}">element to translate</span>

or

<span style="{{transform-translate|translating value along X|translating value along Y|display = display}}">element to translate</span>

with arguments

• translating value along X: first unnamed parameter {{{1|0}}} for translating along X (default 0.0).

Positive values translate rightwards along X.

• translating value along Y: second unnamed parameter {{{2|0}}} for translating along Y (default 0.0).

Positive values translate downwards 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 translation, 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 translation happens at the center of the object's bounding box and it's effective position will retain the original values of the object as if untranslated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display parameter to further control positioning.

Syntax		Result
Some characters translated along X:
<span style="{{transform-translate|45px}}">A</span><span style="{{transform-translate|22.5px}}">B</span><span style="{{transform-translate|0}}">C</span><span style="{{transform-translate|-22.5px}}">D</span><span style="{{transform-translate|-45px}}">E</span>		ABCDE
Some characters translated along Y:
<span style="{{transform-translate|0|-15px}}">A</span><span style="{{transform-translate|0|-7.5px}}">B</span><span style="{{transform-translate|0|0}}">C</span><span style="{{transform-translate|0|7.5px}}">D</span><span style="{{transform-translate|0|15px}}">E</span>		ABCDE
This is a placeholder image. It is untranslated.
<div style="position: relative; top: 0px; left: 0px; {{transform-translate|0|0|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is translated along X.
<div style="position: relative; top: 0px; left: 0px; {{transform-translate|125px|0px|display = block}}">[[File:Clockface.png|200px]]</div>
This is a placeholder image. It is translated along Y.
<div style="position: relative; top: 0px; left: 0px; {{transform-translate|0px|125px|display = block}}">[[File:Clockface.png|200px]]</div>

See also

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

External links

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