Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - transform:scale

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 Skaluje pojemnik (w dwóch wymiarach)
Dziedziczenie nie
Wartości scale(x,y)
Wartość domyślna brak
Przykład transform : scale (2.5)
Składnia JavaScript object.style.transform="scale(2.5, 1.2)"

Aby zdefiniować obrót, należy wpisać w definicji stylu transform:scale(x,y). Można skalować cały pojemnik o tę samą wartość lub każdy bok z osobna.

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

Pierwotna wielkość:

Tekst

Skalowanie w skali 1,5:

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

Tekst

Możliwe jest skalowanie każdego boku osobno, np. 0.5, 2:

<div style="transform:scale(0.5, 2); -webkit-transform:scale(0.5, 2); 
-moz-transform:scale(0.5, 2); -o-transform:scale(0.5, 2); 
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