Konwersja 2D CSS3

Konwersja CSS3

Przejście CSS3, możemy być przenoszone, skalowane, z kolei, obracać i elementy rozciągliwe.

Jak to działa?

Efekt konwersji, tak że element w celu zmiany kształtu, wielkości i położenia.

Można konwertować elementy 2D lub 3D.

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.

Internet Explorer 10, Firefox i Opera wspiera przekształcenia nieruchomości.

Chrome i Safari wymaga wersji prefiksu -webkit-.

Uwaga: Internet Explorer 9 w wersji wymaga prefiksu -ms-.

konwersja 2D

W tym rozdziale dowiesz się metodę konwersji 2D:

• translate ()
• obrócić ()
• scale ()
• pochylać ()
• Matryca ()

W następnym rozdziale dowiesz się konwersji 3D.

Przykłady

div { transform: obrócić (30 stopni) ; - Ms-transform: obrócić (30 stopni) ; / * IE 9 * / - WebKit-transform: obrócić (30 stopni) ; / * Safari i Chrome * / }

Spróbuj »

translate () metoda

tłumaczyć sposób (), w zależności od lewej (oś X) i górnej (oś Y) od położenia danego parametru, wychodząc od aktualnej pozycji elementu.

Przykłady

div { transform: translate (50 × 100 px) ; - Ms-transform: translate (50 × 100 px) ; / * IE 9 * / - WebKit-transform: translate (50 × 100 px) ; / * Safari i Chrome * / }

Spróbuj »

przełożyć wartości (50px, 100px) jest ruchomy element 50 pikseli z lewej strony i przeniósł 100 pikseli od góry.

obrócić () metoda

obrócić () metoda w danej liczbie stopni w ruchem wskazówek zegara elementów. Ujemna wartość jest dozwolone, jest to obrót w lewo z elementów.

Przykłady

div { transform: obrócić (30 stopni) ; - Ms-transform: obrócić (30 stopni) ; / * IE 9 * / - WebKit-transform: obrócić (30 stopni) ; / * Safari i Chrome * / }

Spróbuj »

Wartość rotate (30deg) elementy obrócone o 30 stopni w prawo.

Metoda scale ()

Metoda skali (), które zwiększają lub zmniejszają rozmiar elementu, w zależności od szerokości (oś X) i wysokość (oś Y) Parametry:

Przykłady

-ms-transform: scale (2,3) ; / * IE 9 * / -webkit-transform: scale (2,3); / * Safari * / transform: scale (2,3); / * Standardowa składnia * /

Spróbuj »

waga (2,3) szerokość przejścia jest dwukrotnie jego rozmiar oryginału, a trzy razy większy od jego pierwotnej wysokości.

Metoda pochylać ()

Sposób skosu (), element według poprzecznej (osi x) i pionowym parametrów linii (oś Y) dla danego kąta:

Przykłady

div { transform: skośna (30 stopni, 20 stopni) ; - Ms-transform: skośna (30 stopni, 20 stopni) ; / * IE 9 * / - WebKit-transform: skośna (30 stopni, 20 stopni) ; / * Safari i Chrome * / }

Spróbuj »

pochylać (30deg, 20deg) jest elementem osi X i osi Y o 20 stopni wokół 30 stopni.

Metoda macierzy ()

Sposób matrycy (,) oraz metodę konwersji 2D połączone w jedną całość.

Metoda matryca ma sześć parametrów, w tym obrót, skalowanie, przenoszenie (panoramowanie) oraz funkcji nachylenia.

Przykłady

Zastosowanie matrycy () metoda obracania elementu div 30 °

div { transform: matrycowy (0,866, 0,5 - 0,5, 0,866, 0, 0) ; - Ms-transform: Matrix ( 0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * IE 9 * / - WebKit-transform: Matrix (0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * Safari i Chrome * / }

Spróbuj »

Nowa właściwość konwersji

Poniżej znajduje się lista wszystkich właściwości konwersji:

metoda konwersji 2D