2.
2.

Rotiți un element folosind CSS 3

Din când în când, web designerii se confruntă cu problema rotirea unui element. Datorită CSS 3, această problemă are acum o soluție destul de simplă. Din nou, pentru compatibilitatea între browsere, trebuie să specificați mai multe proprietăți. Mai jos este un exemplu de cod pentru rotiți un element cu 90 de grade.

Cod CSS

#rotate_element (
-webkit-transform: rotire(90deg); // rotiți elementul pentru diferite browsere



transformare: rotire(90deg);
}

Alinierea și direcția textului folosind CSS 3

Acum mai multe despre proprietate modul de scriere. Vă permite să setați alinierea (stânga - dreapta) textului elementului și, cel mai interesant, direcția (orizontală sau verticală)! Să ne uităm și să încercăm:

lr-tb textul este direcționat de la stânga la dreapta.
rl-tb textul este direcționat de la dreapta la stânga.
tb-rl Textul este direcționat vertical și aliniat sus și dreapta.
bt-rl textul este direcționat vertical și aliniat la marginea de jos și din dreapta.
tb-lr Textul este direcționat vertical și aliniat sus și stânga.
bt-lr textul este îndreptat vertical și aliniat la marginile de jos și din stânga.
Folosind exemplul frazei textul merge aici puteți lua în considerare efectul proprietăților CSS

Cod CSS

Text(
modul de scriere: lr-tb; /* textul este direcționat de la stânga la dreapta */
}

Text1 (
modul de scriere: rb-tb; /* textul este direcționat de la dreapta la stânga */
}

Exemplu de rotire a textului la 90 de grade și alinierea textului CSS 3

Aici exemplu gata făcut. Rotiți textul cu 90 de grade. Pentru a face acest lucru, trebuie doar să creați un bloc cu identificatorul rotateText și să setați proprietățile CSS ale acestuia.

Cod HTML și CSS

Exemplu Rotirea unui element cu 90 de grade în CSS poate fi vizualizată la linkul de mai jos.

• Traducere

Bună, dragă habrafriend! Există multe exemple online de mari utilizări ale transformărilor și tranzițiilor în CSS3. În acest articol, vom trece peste elementele de bază ale CSS3 și vom învăța cum să creați așa ceva. Acest tutorial va fi util pentru cei care tocmai au început să se familiarizeze cu CSS3. Să începem!

Sistem de coordonate

Pentru a face mai ușor de înțeles cum funcționează mișcarea unui obiect, vom lucra într-un sistem de coordonate.


Cu toate acestea, sistemul nostru de coordonate are o particularitate: axa Y este direcționată în direcția opusă decât de obicei. De ce? Faptul este că HTML și CSS (împreună cu, de exemplu, ActionScript) folosesc un sistem de coordonate invers, deoarece pagina web începe în colțul din stânga sus și coboară.
Nota: Vom presupune că ești deja familiarizat Structura HTMLși CSS. Voi sări peste explicațiile despre modul de configurare fișier CSS, cum să plasați pozele etc. Ne vom concentra pe animarea imaginilor. Dacă nu ești sigur care sunt abilitățile tale nivel inalt, apoi vă recomandăm să aruncați o privire la cursul lecțiilor „HTML și CSS în 30 de zile” (gratuit și pe Limba engleză) pentru a învăța tot ce ai nevoie.

1: Mișcare orizontală

Prima mișcare pe care o vom demonstra este orizontală. Vom muta obiectele de la stânga la dreapta și de la dreapta la stânga.

Deplasarea spre dreapta

Pentru a muta un obiect vom folosi transforma: traduce(x,y), unde X este un număr pozitiv și Y=0.


HTML
Deschideți editorul de coduri preferat și introduceți următoarele:

Am definit trei clase pentru imagine:

• obiect: Stabilirea regulilor de bază ale obiectului nostru.
• van: Vom folosi diferite obiecte pentru a demonstra fiecare tip de animație.
• move-right: Folosind această clasă ne vom muta obiectul.

CSS
Mai întâi, vom plasa obiectul nostru (imaginea camionului) în centru.
.obiect (poziție: absolut; ) .dubiță (sus: 45%; stânga: 44%; )
În acest exemplu, vom muta obiectul 350px la dreapta. Sintaxa folosită transform: translate(350px,0);. În plus, obiectul se va mișca doar când treci cu mouse-ul peste el: #axa:hover .mutare-dreapta.

#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome și Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0 /** Firefox **/ )
Parametru transforma va muta doar obiectul dintr-un punct în altul, dar nu va crea o animație mișcare dată. Pentru a remedia acest lucru, trebuie să adăugați un parametru de mutare la class.object.

Obiect (poziție: absolut; tranziție: toate cele 2s ease-in-out; -webkit-transition: toate 2s ease-in-out; /** Chrome și Safari **/ -moz-transition: toate 2s ease-in-out ; /** Firefox **/ -o-transition: toate 2s-ul de intrare **/ )
Această regulă de mutare va spune browserului să se anime Toate parametrii obiectului activați 2 secunde(fără întârziere) folosind funcția ușurință-in-out.
Putem folosi 6 funcții diferite de sincronizare a mișcării:

• liniar: Mișcarea are loc cu o viteză constantă de la început până la sfârșit.
• uşura: Mișcarea începe încet și apoi crește viteză.
• ușurință: Mișcarea începe încet.
• uşurare: Mișcarea se termină încet.
• ușurință-in-out: Mișcarea începe și se termină încet.
• cubic-bezier: Determinați manual valoarea mișcării.

Deplasarea spre stânga

Pentru a muta un obiect la stânga, trebuie doar să puneți o valoare negativă pe axă OH, in timp ce Y ramane neschimbat. În cazul nostru, vom muta obiectul în - 350px La stânga.

HTML
Creați unul nou document htmlși lipiți următorul cod:

De data aceasta folosim clasa mută la stânga pentru a muta obiectul la stânga.

CSS
Acum să introducem -350px pentru axa OX. transform: translate(-350px,0);- mutați obiectul spre stânga.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari și Chrome **/ -o-transform: translate(-350px ,0); /** Opera **/ -moz-transform: translate(-350px,0 /** Firefox **/ )
Deoarece am definit deja regulile de mișcare mai devreme, nu trebuie să o facem din nou.

2: Mișcare pe verticală

Deplasarea unui obiect pe verticală nu va fi dificilă, deoarece este identic cu cel orizontal. Singura diferență este că vom folosi valoarea -y pentru a trece în sus și a valorifica y să se deplaseze în jos.

În sus

HTML
Șablonul HTML este identic cu exemplele anterioare. Cu toate acestea, vom înlocui obiectul nostru cu o rachetă (pentru claritate) și vom atribui o clasă de mutare.

CSS
La fel ca și camionul, vom plasa racheta în centru:
.rachetă ( sus: 43%; stânga: 44%; )
După cum am observat mai devreme, coordonata Y trebuie să fie negativă. În cazul nostru, vom muta obiectul cu 350 px în sus.

#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: traducere(0,-350px )

Să ne mișcăm în jos

După cum probabil ați ghicit, pentru a muta un obiect în jos, coordonata Y trebuie să fie pozitivă, iar coordonata X trebuie să fie 0. Sintaxă: translate(0,y);

HTML

CSS
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )

3: Mișcare în diagonală

Pentru a muta un obiect în diagonală, vom combina parametrii XȘi y. Sintaxa va fi următoarea: transforma: traduce(x,y).În funcție de direcție, valoarea XȘi y poate fi pozitiv sau negativ.

HTML

CSS
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: traducere(350px,-350px)

4: Rotire

Rotația în CSS3 este controlată de coordonatele de grade (de la 0° la 360°). Pentru a roti un obiect, aplicați următoarele opțiuni: transformare: rotire(ndeg); Unde n- grade.

Rotire în sensul acelor de ceasornic

Pentru a roti un obiect în sensul acelor de ceasornic, aplicați o valoare pozitivă rotire(ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transform: rotire(360deg); -webkit-transform: rotire(360deg); -o-transform: rotire(360deg); -moz-transform: rotire(360deg); )

Rotire în sens invers acelor de ceasornic

Pentru a roti un obiect în sens invers acelor de ceasornic, aplicați o valoare negativă pentru rotire(ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transform: rotire(-360deg); -webkit-transform: rotire(-360deg); -o-transform: rotire (-360deg); -moz-transform: rotire (-360deg); )

5: Scalare

Scalare este caracteristică interesantă CSS3. Folosind parametrul scara(n) sau parametru scara(x,y), putem fie să creștem, fie să micșorăm obiectul direct în cadru HTML. Obiectul își va schimba dimensiunea în funcție de valoarea lui n/x,y, unde axa X este lățimea și axa Y este înălțimea.
Să ne uităm la următorul exemplu.

Traducere: Vlad Merzhevich

Scalarea, deformarea și rotirea oricărui element este posibilă folosind proprietatea de transformare CSS3. Este susținut de toată lumea browsere moderne(cu prefixe) și permite degradarea grațioasă, de exemplu:

#myelement ( -webkit-transform: rotire(30deg); -moz-transform: rotire(30deg); -ms-transform: rotire(30deg); -o-transform: rotire(30deg); transformare: rotire(30deg); )

Lucruri bune. Cu toate acestea, întregul element se rotește - conținutul său, marginile și imagine de fundal. Ce să faci dacă vrei doar să te întorci imagine de fundal? Sau pentru ca fundalul să rămână pe loc, dar elementul se rotește?

În prezent, W3C nu are propuneri pentru transformarea imaginilor de fundal. Acest lucru ar fi incredibil de util, așa că bănuiesc că va apărea ceva în cele din urmă care nu va ajuta dezvoltatorii care doresc să folosească efecte similare Astăzi.

Din fericire, există o soluție. În esență, acesta este un hack care adaugă o imagine de fundal la pseudo-elementul :before sau :after, mai degrabă decât la containerul părinte. Pseudo-elementul se poate transforma independent.

Transformând doar fundalul

Containerul nu trebuie să aibă stiluri, dar trebuie să seteze poziția: relativă, deoarece pseudo-elementul nostru este poziționat în interior. Setați și overflow: ascuns, altfel fundalul se va extinde dincolo de container.

#elementulmeu (poziție: relativă; depășire: ascuns; )

Acum putem crea un pseudo-element poziționat absolut cu un fundal transformabil. Setăm proprietatea z-index la -1, aceasta ne asigură că fundalul apare sub conținutul containerului.

#myelement:before (conținut: ""; poziție: absolut; lățime: 200%; înălțime: 200%; sus: -50%; stânga: -50%; z-index: -1; fundal: url(background.png) ) 0 0 repetare -webkit-transform: rotire(30deg);

Rețineți că poate fi necesar să ajustați lățimea, înălțimea și poziția pseudo-elementului. De exemplu, dacă utilizați o imagine care se repetă, zona de rotație ar trebui să fie mai mare decât recipientul în sine pentru a se potrivi pe deplin cu fundalul.

Fixarea fundalului elementelor transformabile

Orice transformări ale containerului părinte sunt aplicate și pseudo-elementelor. Deci, trebuie să anulăm transformarea, de exemplu, dacă containerul este rotit cu 30 de grade, fundalul ar trebui să fie rotit -30 de grade, astfel încât să ajungă într-o poziție fixă:

#elementulmeu (poziție: relativă; overflow: ascuns; -webkit-transform: rotire(30deg); -moz-transform: rotire(30deg); -ms-transform: rotire(30deg); -o-transform: rotire(30deg) ; transformare: rotire(30deg ) #elementul meu:înainte (conținut: ""; poziție: absolută; lățime: 200%; sus: -50%; stânga: -50%; z-index: - 1; background: url(background.png) 0 0 repetare -webkit-transform: rotire(-30deg); )

Din nou, trebuie să ajustați dimensiunea și poziția, astfel încât fundalul să se potrivească adecvat în containerul părinte.

Vă rog, de exemplu. Codul complet este stocat în HTML.

Efectul funcționează în IE9, Firefox, Chrome, Safari și Opera. IE8 nu va afișa nicio transformare, dar va apărea fundalul.

IE6 și 7 nu acceptă pseudo-elemente, așa că fundalul va dispărea. Cu toate acestea, dacă doriți să acceptați aceste browsere, puteți adăuga o imagine de fundal la container și apoi o setați la niciunul folosind selectoare moderne sau prin comentarii condiționate.

Modelul vizual Formatare CSS descrie sistemul de coordonate din cadrul fiecărui element poziționat. Sistemul de coordonate este punctul de referință pentru proprietățile offset. Poziția și dimensiunile în acest spațiu de coordonate pot fi considerate ca fiind date în pixeli, în raport cu un punct de referință, cu valori pozitive mergând spre dreapta și în jos. Acest spațiu de coordonate poate fi modificat folosind proprietatea transform.

Transformări CSS3 vă permit să mutați, să rotiți și să scalați elemente. Transformările transformă un element fără a afecta alte elemente ale paginii web, de ex. alte elemente nu se mișcă în raport cu acesta.

Elementele care pot fi transformate includ elemente cu afișaj: bloc; și afișaj: inline-block; , precum și elemente, sens proprietăți de afișare care este evaluat ca table-row , table-row-group , table-header-group , table-footer-group , table-cell sau table-caption . Un element cu orice valoarea stabilită transformă alte proprietăți decât niciunul .

Există două tipuri de transformări CSS3 − 2DȘi 3D. Transformări 2D transforma elemente în spațiu bidimensional folosind o matrice de transformare 2D. Această matrice este utilizată pentru a calcula coordonatele obiectelor noi pe baza valorilor proprietăților de transformare și origine a transformării. Transformările afectează doar redarea vizuală. În ceea ce privește aspectul paginii, acestea pot duce la debordarea conținutului bloc. În mod implicit, punctul de transformare este în centrul elementului.

Transformări 2D ale elementelor

Suport pentru browser

IE: 10,0, 9,0 -ms-
Margine: 12.0
Firefox: 16,0, 3,5 -moz-
Crom: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Operă: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Browser Android: 53, 2.1 -webkit-
Crom pentru Android: -webkit-

1. Funcțiile de transformare 2D se transformă

Proprietatea specifică tipul de transformare a elementului. Proprietatea este descrisă folosind functii de transformare, care mută elementul în raport cu poziția sa curentă pe pagină sau îi modifică dimensiunea și forma inițială. Nu moștenit.

Valori valide:

matrix() - orice număr
translate() , translateX() , translateY() — unități de lungime (pozitive și negative), %
scale() , scaleX() , scaleY() — orice număr
rotate() - unghi (grade, grad, rad sau viraj)
skew() , skewX() , skewY() — unghi (grade, grad, rad)

Funcţie	Descriere
nici unul	Valoarea implicită înseamnă nicio transformare. De asemenea, anulează transformarea unui element dintr-un grup de elemente transformabile.
matrice (a, c, b, d, x, y)	Compensează elementele și stabilește modul în care acestea se transformă, permițându-vă să combinați mai multe funcții de transformare 2D într-una singură. Rotirea, scalarea, înclinarea și repoziționarea sunt permise ca transformări. Valoarea lui a modifică scara orizontală. O valoare între 0 și 1 scade elementul, iar o valoare mai mare decât 1 îl mărește. Valoarea c deformează (deplasează) laturile elementului de-a lungul axei Y, o valoare pozitivă se deplasează în sus, o valoare negativă se deplasează în jos. Valoarea b deformează (deplasează) laturile elementului de-a lungul axei X, o valoare pozitivă la stânga, o valoare negativă la dreapta. Valoarea d modifică scara verticală. O valoare mai mică de 1 scade elementul, mai mare de 1 îl mărește. Valoarea x mută elementul de-a lungul axei X, pozitiv la dreapta, negativ la stânga. O valoare y mută elementul de-a lungul axei y, o valoare pozitivă îl mută în jos, iar o valoare negativă îl mută în sus.
traduce(x,y)	Mută ​​un element într-o locație nouă, mutându-l în raport cu poziția sa normală la dreapta și în jos folosind coordonatele X și Y, fără a afecta elemente adiacente. Dacă trebuie să mutați un element la stânga sau în sus, atunci trebuie să utilizați valori negative.
translateX(n)	Deplasează un element în raport cu poziția sa normală X.
traduceY(n)	Deplasează un element în raport cu poziția sa normală de-a lungul axei Y.
scara(x,y)	Scala elementele pentru a le face mai mari sau mai mici. Valorile între 0 și 1 fac elementul mai mic. Prima valoare scalează elementul în lățime, a doua - în înălțime. Valorile negative afișează elementul într-o manieră în oglindă.
scaleX(n)	Funcția scalează lățimea elementului, făcându-l mai lat sau mai îngust. Dacă valoarea este mai mare decât unu, elementul devine mai larg dacă valoarea este între unu și zero, elementul devine mai îngust. Valorile negative afișează elementul pe orizontală ca o imagine în oglindă.
scară Y(n)	Funcția scalează înălțimea elementului, făcându-l mai înalt sau mai scurt. Dacă valoarea este mai mare decât unu, elementul devine mai înalt dacă valoarea este între unu și zero, elementul devine mai mic; Valorile negative afișează elementul în oglindă verticală.
rotire (unghi)	Rotește elementele cu un număr specificat de grade, valorile negative de la -1grade la -360de rotesc elementul în sens invers acelor de ceasornic, valorile pozitive rotesc elementul în sensul acelor de ceasornic. Valoarea rotație (720deg) rotește elementul cu două rotații complete.
oblică (unghiul x,unghiul y)	Folosit pentru a deforma (deforma) laturile unui element în raport cu axele de coordonate. Dacă este specificată o valoare, a doua va fi determinată automat de browser.
skewX(unghi)	Deformează laturile elementului în raport cu axa X.
skewY(unghi)	Deformează laturile elementului în raport cu axa Y.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Sintaxă

Div ( -webkit-transform: rotire(360deg); -ms-transform: rotire(360deg); transformare: rotire(360deg); )

Treceți mouse-ul peste blocuri pentru a vedea funcțiile de transformare în acțiune.

2. Punct de transformare transformare-origine

Proprietatea vă permite să mutați centrul de transformare, în raport cu care se modifică poziția/mărimea/forma elementului. Valoarea implicită este center , sau 50% 50% . Setat numai pentru elementele transformate. Nu moștenit.

funcția de rotație() în CSS efectuează o transformare de rotație bidimensională pe un element în jurul unui centru fix. În acest caz, blocul nu este deformat și nu afectează poziția containerelor HTML vecine. Metoda vă permite să specificați unghiul de rotație. În plus, este posibil să setați un centru arbitrar de rotație.

Transformarea blocului

În CSS, rotate() este o funcție de transformare, deci trebuie să fie transmisă proprietății de transformare a elementului.

Element (transformare: rotire(45deg); )

Primul și singurul argument este unghiul cu care obiectul va fi rotit. Rotația se realizează în spațiu bidimensional. Pentru transformările 3D, există funcții CSS rotateX(), rotateY(), rotateZ() și rotate3d().

Spațiul de pe pagină ocupat inițial de element rămâne rezervat acestuia. Mișcarea vizuală are loc într-un nou strat fără a muta blocurile adiacente.

Unghiul de rotație

Argumentul unghi transmis metodei trebuie să fie de tip CSS . Se compune din valoare numericăși unități de măsură deg (din engleză grad - grad).

Un unghi pozitiv determină rotirea obiectului în sensul acelor de ceasornic, un unghi negativ - în direcția opusă.

Centrul de rotație

În mod implicit, blocul este rotit în jurul centrului său geometric. Pentru a schimba acest punct, trebuie să utilizați proprietatea transform-origin.

În mod standard, este nevoie de trei parametri care definesc coordonatele de-a lungul axelor X, Y și Z Dar, deoarece rotate() în CSS este o transformare bidimensională, va fi suficient să treci doar două valori.

Element ( transformare: rotire(45deg); origine-transformare: 20px 100%; )

Coordonatele de-a lungul fiecărei axe pot fi specificate în orice unități valide de lungime, procent din dimensiunea blocului sau folosind Cuvinte cheie sus, jos, stânga, dreapta. Originea este situată în colțul din stânga sus al containerului dreptunghiular.

Animație de rotație

Proprietatea de transformare se pretează bine la schimbări dinamice, prin urmare CSS vă permite să creați o animație a rotației unui element în spațiul bidimensional.

Dacă doriți să rotiți un obiect ca răspuns la o anumită acțiune a utilizatorului, cum ar fi trecerea cursorului, puteți utiliza proprietatea de tranziție CSS pentru a determina modificarea lent a valorii altor proprietăți.

Element ( tranziție: transformare 2s; ) element:hover ( transformare: rotire(180deg); )

LA la elementul original nu se aplică nicio transformare, dar când treceți cu mouse-ul peste el, blocul se va roti ușor la 180 de grade în două secunde. Când utilizatorul îndepărtează cursorul, va avea loc aceeași rotație lină la poziția inițială.

Mai mult într-un mod complicat animația unui obiect este de a determina secvența modificărilor de cadre pentru acesta folosind proprietăți și regula @keyframes.

Element ( animație-nume: rotire; animație-durată: 2s; animație-iterație-număr: infinit; animație-funcție de sincronizare: liniar; ) @keyframes se rotesc ( de la ( transform: rotate(0deg); ) la ( transform: rotate) (360 de grade);

LA elementul specificat se aplică o animație de rotire, definind o rotație completă de la 0 la 360 de grade în două secunde. Proprietatea animation-iteration-count setează animația să se repete la nesfârșit, iar funcția animation-timing-se stabilește efectul de tranziție lină. Combinarea proprietății in cu transformări de rotație vă permite să creați efecte dinamice frumoase.