Tematy: transform : translate | transform : translate3d | transform : rotate | transform : rotate3d | transform : scale | transform : scale3d | transform : skew | transform : matrix | transform : matrix3d | transform-origin | transform-style | perspective | perspective-origin | backface-visibility

Aby zdefiniować poziome i pionowe przesunięcie, należy wpisać w definicji stylu transform:translate(Xpx,Ypx). Wartości dodatnie przesuwają pojemnik w prawo i w dół, wartości ujemne - w lewo i w górę.

Żadna z przeglądarek nie obsługuje czystego kodu, Firefox wymaga użycia prefiksu -moz-, Chrome i Safari prefiksu -webkit-, natomiast Opera - prefiksu -o-.

Pierwotne położenie:

Przesunięcie o 50 pikseli w prawo i 15 pikseli w górę:

<div style="transform:translate(50px,-15px); -webkit-transform:translate(50px,-15px); 
-moz-transform:translate(50px,-15px); -o-transform:translate(50px,-15px); 
width: 200px; height: 100px; background-color: olive">
<div style="padding:16px"><h1>Tekst</h1></div>
</div>

Możliwe jest przesunięcie według jednego boku, za pomocą translateX lub translateY:

<div style="transform:translateX(30px); -webkit-transform:translateX(30px); 
-moz-transform:translateX(30px); -o-transform:translateX(30px); 
width: 200px; height: 100px; background-color: olive">
<div style="padding:16px"><h1>Tekst</h1></div>
</div>

<div style="transform:translateY(30px); -webkit-transform:translateY(30px); 
-moz-transform:translateY(30px); -o-transform:translateY(30px); 
width: 200px; height: 100px; background-color: olive">
<div style="padding:16px"><h1>Tekst</h1></div>
</div>

Interpretacja: Firefox (z prefiksem), Chrome (z prefiksem), Opera (z prefiksem).