Dzisiaj chciałem się zająć nowymi technikami kaskadowych arkuszy stylów – transformacjami 2D. W tej chwili możliwości takie udostępniają Firefox 3.5+, Opera 10.5, Safari 3.1 + i Chrome i dzięki temu dowolne elementy DOM możemy przemieszczać, obracać, zniekształcać, skalować. Aby to uzyskać stosujemy własności “transform” z różnymi przedrostkami zależnie od przeglądarki.
-moz-transform: rotate(40deg); //firefox -webkit-transform: rotate(40deg); //safari,chrome -o-transform: rotate(40deg); // opera
Podstawowy komponent
Zaczniemy od podstawoego komponentu na którym będziemy wykonywać nasze transformacje. Prosty DIV z tłem, ustaloną wysokością i szerokością:
background: #5CFF66; width: 200px; height: 200px;
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Rotate
Teraz wystarczy zastosować metodę rotate (kąt) z przekazanym w parametrze kątem aby obrócić nasz element zgodnie z ruchem wskazówkami zegarka.
-moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg);
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Scale
Aby skalować nasz element stosujemy metodę scale(arg1,arg2), scaleX(arg) lub scaleY(arg). Gdy wywołamy funkcję scale tylko z jednym argumentem będzie działała jak scaleX.
-moz-transform: scale(2.1,0.5); -webkit-transform: scale(2.1,0.5); -o-transform: scale(2.1,0.5);
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Skew
Metoda Skew(kąt1,kąt2) pochyla nasz element wobec osi X i Y zgodnie z podanymi kątami. Możemy także osobno wywołać metody skewX i skewY a wywołana skew z jednym parametrem będzie tożsame z korzystaniem z skewX.
-moz-transform: skew(30deg,-10deg); -webkit-transform: skew(30deg,-10deg); -o-transform: skew(30deg,-10deg);
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Translate
Metoda translate(argX,argY)) z kolei przesuwa element wobec osi X i Y zgodnie z podanymi wartościami w pikselach. Także jak w poprzednich przypadkach możemy także osobno wywołać metody translateX i translateY a przy wywołaniu funkcji translate z jednym parametrem, będzie działać jak translateX
-moz-transform: translate(100px, 50px); -webkit-transform: translate(100px, 50px); -o-transform: translate(100px, 50px);
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Matrix
Ludzie, którym matematyka nie jest obca, mogą tworzyć własne przekształcenia za pomocą metody
matrix(a, c, b, d, tx, ty) gdzie a,b,c,d definiują macierz trasformacji a tx i ty są wartościami przesunięcia. Zainteresowanych odsyłam do : tutoriale – matematyka – transformacje.
-moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0);
In nisi justo, feugiat eget vulputate non, vestibulum a massa.
Integer vel sodales augue. Proin vitae quam quis est viverra vulputate sit amet at turpis.
Mauris sed nibh risus, a scelerisque lectus. Integer dictum, magna at
Oczywiście wszystkie te właściwości możemy stosować równocześnie co pozwala uzyskać fascynujące efekty – wystarczy spojrzeć na
przykład (niestety nie przystosowany dla Opery).
Cross Browser?
Wszystko wygląda dobrze, ale co z innymi przeglądarkami? Z IE6+ nie powinno być problemu jeżeli już mamy macierze przekształceń w jednym palcu. Za pomocą filtru “matrix” możemy także uzyskać wszystkie efekty, które tutaj opisałem:
filter:progid:DXImageTransform.Microsoft.Matrix(sProperties)
Jednak na początek należały sprawdzić jak ten konkretny filtr wpływa to na wydajność strony, szczególnie biorąc pod uwagę inne problemy z filtrami (wyniki badań programistów Yahoo). Druga sprawa to aby zastosować na przykład obrót, przesunięcie i skalowanie jednocześnie należy obliczyć konkretną macierz przekształceń. Liczenie tego dla każdego zbioru transformacji jest dość żmudne. Aby obejść ten problem możemy wykorzystać na przykład bibliotekę cssSandpaper (wersja beta).
Źródła:
Webkit transformacje
Tranasformacje w operze
Najpełniejszy artykuł o transformacjach z Mozilla Developer Center – także opisujący inne przeglądarki
Ciekawe przykłady wykorzystania transformacji
Dokumentacja filtru Matrix dla Internet Explorera
