Practica de a folosi regula CSS de transformare

Este adesea necesar să se revigoreze elementele paginii, fără a se recurge la folosirea laborioasă a jаvascript-ului. Regula de transformare CSS este un instrument convenabil pentru crearea unei dinamici complexe, care nu va necesita mult efort.

Toate acțiunile de bază pentru schimbarea elementului: poziție, dimensiuni, rotații, curbură și rotire - sunt disponibile atunci când sunt aplicate elementelor de bază ale layoutului HTML, iar în combinație cu ele vă permit să creați dinamică complexă.

Posibilități de bază ale regulii de transformare

Regula de transformare CSS este proiectată să utilizeze transformări simple ale elementelor de pagină și este utilizată foarte simplu:

• transforma: nici unul;
• transform: funcție ();
• funcția transform (): function () () ();

Următorul exemplu prezintă principalele funcții pe care le puteți utiliza pentru a converti elementele, arătând efectul lor asupra exemplelor.

Aplicațiile simple ale transformărilor sunt asociate cu butoane și elemente ale dialogului cu vizitatorul. Utilizarea practică a efectelor dinamice care să însoțească mișcările mouse-ului sau să atragă atenția asupra acțiunilor pentru serviciile sau bunurile oferite de proprietarul resurselor.

Transformarea este solicitată în meniu, atunci când vizitatorul nu a ales încă direcția de acțiune dorită, dar mouse-ul este deja pe element: elementul din meniu. În acest caz, ceva poate fi transformat: creșterea în dimensiune, îndoiți, rândul său, sau în alt mod „în mod clar“ că pagina este „activă“ și este gata pentru a efectua o acțiune.

Este convenabil să aplicați regula CSS de transformare pentru a crea sugestii și comentarii la elementele paginii. Vizitatorul nu se concentrează întotdeauna pe pagină, mai ales când a venit pentru prima dată. În mod tradițional, fiecare dezvoltator al site-ului consideră că designul resurselor web și dialogul cu vizitatorul reprezintă sfera sa de competență.

Din punct de vedere al vizitatorului, este de datoria lui să decidă ce funcționalitate așteaptă de la site-ul la care a ajuns, ce fel de design și dialog ar trebui să fie. Dacă ceva nu-i place, se va găsi ceea ce este ca pe o altă resursă web.

Combinarea elementelor în timpul transformării

Animația transformă CSS este permisă prin mai multe funcții într-o singură regulă. Puteți specifica valorile pozitive și negative ale transformărilor, este important să aibă sens.

Exemplul arată modul în care imaginea se schimbă atunci când mouse-ul este plutind, dacă regula de transformare include simultan:

• scalare;
• poftă de mâncare
• schimbare.

Efectul triplu este ușor de planificat, dar de multe ori fără o lungă selecție de valori este indispensabilă. Este un lucru când o regulă poate determina cu acuratețe modificările necesare: ele sunt cunoscute. Altă este atunci când trebuie să inventați dinamica în funcție de semnificația elementului.

În unele cazuri, este mai bine să combinați, de exemplu: două divas sunt imbricate unul în celălalt. Celui extern îi este atribuită o regulă de transformare, cea internă este alta. Când se determină logica generală a modificărilor necesare, o puteți transfera regulii unui element.

În exemplu, soluția rezultată seamănă cu o transformare în spațiul tridimensional, dar acest lucru nu este relevant pentru regulile de transformare 3D CSS. Contabilizarea axei Z și manipularea cu partea din spate a elementului este un grup separat de proprietăți și reguli.

Cu toate acestea, indiferent de ideea grafică, toate transformările se fac pe plan, efectele se formează datorită percepției vizuale și modificării corecte a formei elementelor. Conținutul elementelor și modelul liniilor contează.

Caracteristicile regulilor CSS

Prin regula generală a CSS, stilul de transformare este logica statică a transformării elementelor, al căror algoritm nu poate fi modificat după formularea regulilor.

Acest lucru nu depășește conceptul de tabele de stil cascadă, dar în fiecare aplicație concretă trebuie să ținem seama de faptul că dinamica nu are nici evenimente, condiții, nici capacitatea de a manipula procesul în sine.

Dezvoltatorul poate formula doar regula de transformare dorită, iar CSS o va executa exact. Schimbarea atunci, sau în procesul de funcționare a resurselor web nu va fi nimic.

În plus, dimensiunile blocului, conținutul, forma și culoarea elementelor interne sunt de o importanță deosebită. Folosind regulile de transparență (opacitate), puteți obține imagini complexe și suprapune-le unele pe altele - efecte complexe.

O circumstanță esențială este incontrolabilitatea tuturor transformărilor. Toate regulile sunt executate de algoritmi specifici care acceptă numai acele valori care sunt specificate în parametrii funcțiilor de transformare. Combinația corectă de funcții și valorile acestora determină algoritmul de transformare rezultat.

Rețineți că modificarea conținutului elementului, în special proprietățile background-image, poate duce la „se agită la“ - o încălcare a logicii dreptului de transformare, datorită caracteristicilor tehnice ale punerii în aplicare a (browser-ul, protocolul, serverul, în caz contrar). Este logic să se ascundă elementul înainte de a schimba conținutul său: să arate și să continue atunci când procesul de actualizare a fost finalizat.

Implicarea serverului în transformare

În cazul în care nevoia de o reîmprospătare completă de pagini, dezvoltatorii au plecat o lungă perioadă de timp și tipul de tehnologie AJAX a devenit norma pentru afișare și actualiza elementele paginii, atunci este de așteptat dinamica schimbărilor de foi de stil în procesul unei resurse web.

Abordarea tradițională, atunci când paginile au fost formate de dezvoltator și site-ul a fost pus în funcțiune ca atare, este deja depășit. De ce să nu dezvoltați întregul set de fișiere de site-uri, ca urmare a dinamicii dialogului cu vizitatorul: "în zbor".

Utilizarea jаvascript + AJAX este dinamica unui element, însă utilizarea unei limbi de server pentru a modifica un fișier CSS este o posibilitate suplimentară rezonabilă. Vizitatorii diferă nu numai în temperamentul lor, ci și în funcționalitatea pe care o așteaptă și abilitatea de ao afișa.

Oferind funcționalitatea necesară în forma dinamică adaptabilă (schimbarea regulilor CSS în zbor), puteți obține un mare succes și puteți schimba mai bine ratingul resursei web.