Transformacje CSS – rzut izometryczny i skalowanie

11/08/2009
przejdź do komentarzy

Dzięki zastosowaniu transformacji w CSS możemy skonstruować obiekt w rzucie izometrycznym. Transformacje te dostępne są w Safari 3.1+, Chrome i od niedawna w Firefox (od wersji 3.5).

Własność -moz-transform (dla Gecko) lub -webkit-transform (dla WebKit) wykorzystuje funkcje transformacji 2D ze szkicu specyfikacji CSS3.

Zobacz ten przykład.

W tym przykładzie użyłem kombinacji atrybutów rotate – obrót na płaszczyźnie – i skew – obrót wokół osi x i y obiektu. Transformowana jest cała zawartość obiektu, możliwe jest więc “teksturowanie”.


.bc4 {
-webkit-transform: rotate(-45deg) skew(45deg, -10deg);
-moz-transform: rotate(-45deg) skew(45deg, -10deg);
}

Zobacz ten przykład.

W tym przypadku skopiowałem kod HTML mojego bloga i zmniejszyłem go do 30% oryginalnej wielkości korzystając z funkcji scale.


#skala {-moz-transform:scale(0.3); -webkit-transform:scale(0.3);}

Zobacz ten przykład.

Na koniec wariacja dwóch pierwszych przykładów. Domek z teksturą dachu w postaci mojego bloga.

Dokumentacja dostępna jest tutaj.

Powiązane wpisy:

Tagi

css3, html5,

Bartek Cymer