funcția de rotație() în CSS efectuează o transformare de rotație 2D pe un element în jurul unui centru fix. Blocul nu este deformat și nu afectează poziția containerelor HTML adiacente. 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 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 ocupat inițial de elementul din pagină rămâne rezervat acestuia. Mișcarea vizuală are loc într-un nou strat, fără a deplasa blocurile învecinate.

Unghiul de rotație

Argumentul unghi transmis metodei trebuie să fie de tip CSS . Se compune dintr-o valoare numerică și o unitate de măsură grad (de la gradul englez - grad).

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

Centrul de rotație

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

În mod implicit, este nevoie de trei parametri care definesc coordonatele x, y și z. Dar, deoarece rotate() în CSS este o transformare 2D, trebuie să treceți doar două valori.

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

Coordonatele pentru fiecare axă pot fi specificate în orice unitate de lungime validă, un procent din dimensiunea blocului sau folosind cuvintele cheie de 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 schimbării 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 cu mouse-ul peste, puteți utiliza proprietatea CSS de tranziție pentru a încetini modificarea valorii altor proprietăți.

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

Nu se aplică nicio transformare elementului original, dar când treceți cu mouse-ul peste el, blocul se va roti fără probleme la 180 de grade timp de două secunde. Când utilizatorul îndepărtează cursorul, va avea loc aceeași rotație lină la poziția inițială.

O modalitate mai complexă de a anima un obiect este de a defini o secvență de cadre pentru acesta folosind proprietăți și regula @keyframes.

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

O animație de rotire este aplicată elementului specificat, specificând 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-setează un efect de tranziție lină. Combinarea proprietății cu transformări rotative vă permite să creați efecte dinamice frumoase.

Uneori, deciziile neobișnuite de proiectare îl obligă pe designerul de aspect să recurgă la aceleași soluții non-standard atunci când aranjează textul. De exemplu, rotiți unul dintre elementele textului cu un anumit unghi. Acest articol va discuta câteva soluții simple la această problemă.

Înlocuirea textului cu o imagine

Cea mai primitivă soluție la această problemă va fi folosirea unei imagini. Cu ajutorul notoriului program Adobe Photoshop, textul poate fi rotit cu ușurință în orice unghi. După cum înțelegeți, nu este nevoie de multă inteligență pentru a utiliza această metodă.

În unele situații, este imposibil să se folosească o altă metodă, dar în cele mai multe cazuri se îndepărtează de la utilizarea unei imagini. Acest lucru se datorează unui număr de dezavantaje care însoțesc această tehnică:

• Incapacitatea utilizatorului de a copia informațiile în containerul specificat;
• Complexitatea procedurii de corectare a părții de text a elementului;
• Creșterea traficului pe serverul site-ului;
• Creșterea cererilor către server la actualizarea resursei.

În ciuda faptului că au existat atât de multe aspecte negative ale utilizării imaginii, metoda are câteva efecte pozitive.

• Compatibilitate crossbrowser– fără probleme la afișarea în browsere diferite.
• Capacitate mare de poziționare a imaginii.

Totuși, în acest caz, părțile negative depășesc. Va sfatuiesc sa cautati si alte solutii.

Folosind proprietatea de transformare CSS

Aplicarea acestei metode este mult mai mare în comparație cu imaginea. O diferență semnificativă este flexibilitatea în editarea textului și capacitatea de a selecta și copia conținutul unui container rotit. Principala piatră de poticnire pentru dezvoltarea acestei tehnici a fost compatibilitatea între browsere. Până acum, am obținut rezultate destul de bune pe acest front, ceea ce face posibilă aplicarea proprietății transform fără probleme.

Esența proprietății este împărțirea planului în grade. Ca urmare, atunci când specificați un anumit unghi, containerul va lua poziția corespunzătoare. Trebuie menționat că proprietatea în forma sa pură nu este aplicată. Ar trebui să fie însoțit de proprietățile furnizorului, care, de fapt, oferă un indicator ridicat al compatibilității între browsere.

Este important de reținut că nu textul din interiorul blocului schimbă poziția, ci blocul în sine, căruia i se adresează proprietatea prin selectorul de clasă sau într-un alt mod. Mai jos este un exemplu de utilizare a metodei

Container ( - moz- transform: rotire(- 45deg) ; - webkit- transform: rotire(- 45deg) ; - o- transform: rotire(- 45deg) ; - ms- transform: rotire(- 45deg) ; transform: rotire( -45 de grade) ;)

Ca rezultat, obținem ceva de genul acesta:

Mă refer la această proprietate, designul va fi afișat fără probleme în Firefox, Opera, Internet Explower și alte browsere webkit.

Apelare prin Javascript

Esența procesului este complet similară cu cea considerată înainte de această metodă. Pentru a-l implementa, aveți nevoie de cunoștințe minime de js-code, matematică și înțelegerea filtrului Matrix.

javascript

var deg2radians = Math. PI * 2 / 360 , grade = - 4 ; rad = deg * deg2radians, costheta = Math. cos (rad) , sintheta = Math. sin(rad) ; jQuery(".rotatedBlock") . css((filtru: „progid:DXImageTransform.Microsoft.Matrix(M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="extindere automată", activat=adevărat)"} ) ;

Ca rezultat, vom obține aceeași imagine în browser ca atunci când folosim proprietatea transform.

Chiar dacă nu înțelegeți niciun caracter din această intrare, nu contează. Pentru a lucra cu acest cod, este suficient să înțelegeți că valoarea unghiului este scrisă în a doua linie, o înlocuiți singur, restul este pur și simplu copiat fără modificări.

Caracteristici de utilizare a Javascript și CSS

Aceste două metode au câteva diferențe minore în principiul de funcționare, care sunt foarte importante de cunoscut și de luat în considerare.

Prima diferență se bazează pe diferența dintre înălțimea blocului și poziția acestuia. Ieșirea din situație este destul de simplă și este utilizarea proprietății marjei. Prin indentare, setăm blocul la nivelul și poziția dorite. Alte inconsecvențe de poziționare pot fi rezolvate dând blocului o valoare poziționare absolută, care este de asemenea eficient.

O abordare mai complexă și personalizată se bazează pe utilizarea proprietății de origine a transformării. Esența acestei tehnici va fi descrisă în articolele următoare.

Următoarea diferență constă în esența virajului în sine. Când utilizați codul js, punctul de pivotare se află pe marginea blocului. În a doua metodă, acest punct este situat în centrul elementului. Pentru a fi mai ușor de înțeles, priviți imaginea de mai jos.

Modelul de formatare vizuală 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 din acest spațiu de coordonate pot fi considerate ca date în pixeli, relativ la origine, 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 a căror valoare proprietății de afișare este evaluată la table-row , table-row-group , table-header-group , table-footer-group , table-cell sau table-caption . Un element este considerat transformat dacă proprietatea sa de transformare este setată la orice valoare, în afară de 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 noile coordonate ale obiectului, pe baza valorilor proprietăților transformării și originii 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 de elemente 2D

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-
Chrome pentru Android:-webkit-

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

Proprietatea specifică tipul de transformare a elementului. Proprietatea este descrisa cu 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 pentru un element din grupul de elemente care se transformă.
matrice (a, c, b, d, x, y)	Compensează elementele și definește modul în care acestea sunt transformate, permițându-vă să combinați mai multe funcții de transformare 2D într-una singură. Rotația, scalarea, înclinarea și repoziționarea sunt permise ca transformări. Valoarea a modifică scara orizontală. O valoare de la 0 la 1 reduce elementul, mai mult de 1 îl mărește. Valoarea c deformează (deplasează) laturile elementului de-a lungul axei Y, o valoare pozitivă - în sus, o valoare negativă - în jos. Valoarea lui 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 reduce elementul, mai mult de 1 îl mărește. Valoarea x deplasează 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ă se deplasează în jos, o valoare negativă îl mută în sus.
traduce(x,y)	Deplasează un element într-o nouă poziție, deplasându-l din poziția sa normală la dreapta și în jos, folosind coordonatele X și Y, fără a afecta elementele învecinate. Dacă trebuie să mutați elementul la stânga sau în sus, atunci trebuie să utilizați valori negative.
translateX(n)	Compensează elementul în raport cu poziția sa normală X.
traduceY(n)	Mută ​​elementul în raport cu poziția sa normală de-a lungul axei Y.
scara(x,y)	Scadează elementele făcându-le mai mari sau mai mici. Valorile de la 0 la 1 reduc elementul. Prima valoare scalează elementul în lățime, a doua în înălțime. Valorile negative oglindesc elementul.
scaleX(n)	Funcția scalează elementul în lățime, 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 răsturnează elementul pe orizontală.
scară Y(n)	Funcția scalează un element în înălțime, făcându-l mai înalt sau mai scurt. Dacă valoarea este mai mare decât unu, elementul devine mai mare; dacă valoarea este între unu și zero, este mai mică. Valorile negative oglindesc elementul pe verticală.
rotire (unghi)	Rotește elementele cu numărul 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 rotire (720deg) rotește elementul cu două ture 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 jurul axei x.
skewY(unghi)	Deformează laturile elementului în jurul axei Y.
iniţială	Setează valoarea unei proprietăți 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. transformare-punct de origine

Proprietatea vă permite să mutați centrul transformării, î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.

• Traducere

Bună, dragă habradrug! Există multe exemple de transformări și tranziții CSS3 excelente pe web. În acest articol, ne vom referi la elementele de bază ale fundamentelor CSS3 și vom învăța cum să creăm 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 înțelege mai ușor 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 îndreptată în direcția opusă decât de obicei. De ce? Faptul este că HTML și CSS (împreună cu, de exemplu, ActionScript) folosesc sistemul de coordonate invers, deoarece pagina web începe din colțul din stânga sus și coboară.
Nota: Vom presupune că sunteți deja familiarizat cu structura HTML și CSS. Voi sări peste explicarea cum să configurați fișierul CSS, cum să plasați imagini etc. Ne vom concentra pe animarea imaginilor. Dacă nu sunteți sigur că abilitățile dumneavoastră sunt la un nivel înalt, atunci vă sfătuim să aruncați o privire asupra cursului de lecții „HTML și CSS în 30 de zile” (gratuit și pe limba engleza) 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 cod preferat și introduceți următoarele:

Am definit trei clase pentru imagine:

• obiect: Stabilirea regulilor principale 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 a acestei mișcări. Pentru a remedia acest lucru, trebuie să adăugăm un parametru de mutare în clasa .object.

Obiect (poziție: absolut; tranziție: toate 2s ease-in-out; -webkit-transition: toate 2s ease-in-out; /** Chrome și Safari **/ -moz-transition: toate 2s ease-in-out ; /** Firefox **/ -o-tranziție: toate cele 2 ease-in-out; /** Opera **/ )
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: Se deplasează 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: Mutarea se termină încet.
• ușurință-in-out: Mișcarea începe și se termină încet.
• cubic-bezier: Definiți manual valoarea de mutare.

Deplasarea spre stânga

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

HTML
Creaza un 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 introduceți -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.

deplasându-se î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); )

Ne mișcăm în jos

După cum ați ghicit, pentru a muta obiectul în jos, coordonatele Y trebuie să fie pozitive, iar 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 obiectul în diagonală, combinăm parametrii XȘi y. Sintaxa va fi: transforma: traduce(x,y).În funcție de direcție, valoarea XȘi y poate fi atât pozitiv, cât și 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ă pentru 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: Zoom

Scalare este o caracteristică interesantă a CSS3. Folosind parametrul scara(n) sau parametru scara(x,y), putem crește sau micșora obiectul direct în HTML. Obiectul se va redimensiona în funcție de valoarea lui n/x,y, unde axa x este lățimea și y este înălțimea.
Să ne uităm la următorul exemplu.
2.
2.

Rotiți un element cu CSS 3

Din când în când, web designerii se confruntă cu problema rotirea unui element. Datorită instrumentelor CSS 3, această sarcină are 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 cu 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ă)! Ne uităm și î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 vertical și aliniat sus și dreapta.
bt-rl textul este vertical și aliniat în partea de jos și în dreapta.
tb-lr textul este vertical și aliniat sus și stânga.
bt-lr textul este vertical și aliniat la partea de jos și la stânga.
Pe exemplul frazei textul merge aici puteți lua în considerare efectul proprietăților CSS

Cod CSS

Text(
modul de scriere: lr-tb; /* textul este 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 aliniere a textului CSS 3

Iată un exemplu terminat. Textul este rotit 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.

Cod HTML și CSS

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