Najlepszy samouczek Konwersja 2D CSS3 W 2024 r. W tym samouczku możesz dowiedzieć się Konwersja CSS3,Jak to działa?,Pomoc Browser,konwersja 2D,Przykłady,translate () metoda,Przykłady,obrócić () metoda,Przykłady,Metoda scale (),Przykłady,Metoda pochylać (),Przykłady,Metoda macierzy (),Przykłady,Nowa właściwość konwersji,metoda konwersji 2D,

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