This site is supported by donations to The OEIS Foundation.
Template:Transform-translate
[⧼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.
Contents
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 parameterdisplay
allows you to change the CSS display property. It defaults toinline-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 | |
---|---|---|
| ||
<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 | |
| ||
<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 | |
| ||
<div style="position: relative; top: 0px; left: 0px; {{transform-translate|0|0|display = block}}">[[File:Clockface.png|200px]]</div>
|
||
| ||
<div style="position: relative; top: 0px; left: 0px; {{transform-translate|125px|0px|display = block}}">[[File:Clockface.png|200px]]</div>
|
||
| ||
<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}}