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
Dane w pigułce | |
Zastosowanie | Przesuwa pojemnik poziomo i pionowo (w dwóch wymiarach) |
Dziedziczenie | nie |
Wartości | translate(Xpx,Ypx) |
Wartość domyślna | brak |
Przykład | transform : translate (50px,30px) |
Składnia JavaScript | object.style.transform="translate(50px,30px)" |
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:
Tekst
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>
Tekst
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>
Tekst
<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>
Tekst
Interpretacja: Firefox (z prefiksem), Chrome (z prefiksem), Opera (z prefiksem).