W projektowanej specyfikacji CSS3 znajduje się szereg narzędzi do przekształceń 2D i 3D. Pokażemy tutaj kilka przykładów manipulowania ilustracjami - polecenia te możemy też wykorzystać do przekształcania innych elementów, np. bloków tekstu, ale chyba najczęściej będą one stosowane w odniesieniu do zdjęć.

Polecenie ma postać transform, po którym umieszczamy szereg parametrów i ich wartości. Na razie musimy stosować prefiksy -moz i -webkit, dzięki którym odczytują je poprawnie Firefox, Chrome i Safari; czyli -moz-transform i -webkit-transform.

Przykładowo, mamy obrazek w oryginalnej postaci:

Gdy w definicji obrazka zastosujemy styl o postaci:

obrazek zostanie zmniejszony o 20%.

Podobnie możemy powiększać obraz. Zauważ od razu, że niezmiennikiem powiększenia jest środek obrazu, a powiększenie spowoduje przysłonięcie znajdujących się przed nim lub za nim elementów.

Możemy skalować obraz tylko na szerokość lub na wysokość, stosując parametr scaleX lub scaleY.

Parametr rotate pozwala obrócić obraz o pewną liczbę stopni, np. rotate(15deg).

Gdybyśmy użyli wartości ujemnej, obraz zostanie obrócony w lewo. Obrotowi powinno towarzyszyć użycie stylów margin-top i margin-bottom, aby obrócony obraz nie przysłaniał elementów nad nim i pod nim.

Z kolei użycie parametru skew pozwoli pochylić obraz. Gdy zastosujemy parametr skew(20deg), uzyskamy przekrzywienie w lewo, według osi X. Użycie wartości ujemnej spowoduje przekrzywienie w prawo.

Dodanie w skew drugiej wartości, np. skew(20deg, 10deg), pozwoli uzyskać nie tylko przekrzywienie w osi X, ale i dodatkowo w osi Y.

Użycia tego polecenia w odniesieniu do tekstu raczej nie zalecam, chyba że ktoś chce uzyskać jakieś specjalne efekty.

Zmanipulowany śródtytuł

Z przykładów tych (jak również z pokazanych w poprzednich wpisach) widać jasno, jak potężne narzędzia wizualizacyjne oferuje projekt nowej specyfikacji stylów. Oczywiście trzeba je stosować z głową, aby fantazyjne efekty nie przysłoniły treści.