Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - transformacje

CSS3 - transform:translate

Email Drukuj PDF

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).

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V