Rotiți textul la un unghi dat folosind CSS. Mișcări și transformări în CSS3

Proprietatea de transformare CSS (din cuvântul „transformare”) vă permite să modificați un element din paginile HTML. De exemplu, poți

• roti
• deplasa
• schimba scara
• cant
• combinați pașii de mai sus

Datorită acestei proprietăți, puteți crea efecte interesante fără a utiliza JavaScript, ceea ce vă permite să accelerați browserul. De asemenea, este important să rețineți că este posibil să combinați efectul cu întârzieri de timp.

1. Sintaxa de transformare CSS

transform : transform1 [transform2 ];

Mai multe acțiuni cu un obiect sunt permise simultan (de exemplu, rotiți, deplasați și schimbați scara).

O notă despre browsere

Nu toate browserele acceptă transformarea. Trebuie să utilizați prefixele CSS ale furnizorului:

• -ms-transform - pentru IE9 și mai vechi (sub versiunea 9, transformarea nu este acceptată
• -webkit-transform - pentru Chrome, Safari, Android și iOS
• -o-transform - pentru Opera până la versiunea 12.10
• -moz-transform - pentru Firefox până la versiunea 16.0

2. transform:rotate(x) - rotirea obiectului

Pentru a roti un element există o comandă rotate(x) . Vă permite să rotiți un obiect cu x grade în sensul acelor de ceasornic sau în sens invers acelor de ceasornic. Valoarea x trebuie specificată în grade grade

Exemplul #1. Rotirea unui obiect în html prin transformare

Notă

Proprietăți:

-ms-transform : rotire (20deg ); -webkit-transform : rotire (20deg ); -o-transform : rotire (20deg ); -moz-transform : rotire (20deg );

Necesar pentru funcționarea corectă în versiunile mai vechi de browsere. În exemplele următoare le vom scrie și pe acestea.

Exemplul #2. Rotirea unui obiect în html la hover

Să creăm o clasă kvadrat2 și să scriem o pseudo-clasă :hover pentru ea, în care se va specifica rotația și schimbarea culorii la una mai deschisă (de la #444 la #888).

Pagina se transformă în următoarele

Dar această rotație are loc brusc și nu arată „spectaculos”. Acest lucru poate fi rezolvat cu ușurință prin netezire. Următorul exemplu va implementa animația.

Exemplul #3. Rotire lină la hover (animație) în html

Pentru o rotație lină (sau cu alte cuvinte, netezire), trebuie să setați încă o proprietate de tranziție. Această proprietate este responsabilă pentru efectul de sincronizare și de netezire. Acest exemplu ia în considerare cel mai simplu caz cu o tranziție în 1 secundă cu viteză liniară liniară

Pagina se transformă în următoarele

A devenit mult mai frumos și această animație oferă multe oportunități de a crea efecte pe site folosind doar CSS.

3. transform:translate(x,y) - deplasarea obiectului

Următoarea comandă la care ne vom uita este comanda de mutare a unui obiect translate(x,y) , unde argumentele din paranteze sunt deplasarea de-a lungul axei X și respectiv Y.

Exemplul #4. Deplasarea obiectelor în html prin transformare

Pagina se transformă în următoarele

Astfel de efecte sunt adesea folosite. La urma urmei, acest lucru face posibilă crearea de animație fără JavaScript. În acest caz, pătratul se mișcă instantaneu (fără animație).

Notă

Dacă trebuie să aplicați o transformare de-a lungul uneia dintre axe, atunci puteți utiliza un caz mai special: translateX(x) - X offset, translateY(y) - Y offset.

4. transform:scale(x,y) - scalarea obiectului

Comanda pentru scalarea unui obiect este scale(x,y) , unde argumentele din paranteze sunt scalarea de-a lungul axelor X, respectiv Y.

Exemplul #5. Scalarea obiectelor în html

Pagina se transformă în următoarele

Când plutește, pătratul devine mai mare pe orizontală cu 50% (coeficient 1,5) și pe verticală cu 30% (coeficient 1,3). O valoare de 1 înseamnă că nu există scalare. Orice mai mic de 1 va însemna că obiectul devine mai mic.

Notă

Dacă trebuie să aplicați o transformare de-a lungul uneia dintre axe, atunci puteți utiliza un caz mai special: scaleX(x) - scalare de-a lungul X, scaleY(y) - scalare de-a lungul Y.

5. transform:skew - înclinare obiect

Comanda pentru înclinarea unui obiect este skew(x,y) , unde argumentele din paranteze sunt panta de-a lungul axelor X și respectiv Y. Panta trebuie specificată în grade grade.

Exemplul #6. Deformarea obiectelor în html

Pagina se transformă în următoarele

Când este plasat, pătratul se transformă într-un diamant datorită înclinării.

Notă

Dacă trebuie să aplicați o transformare de-a lungul uneia dintre axe, atunci puteți utiliza un caz mai special: skewX(x) - pantă în X, skewY(y) - pantă în Y.

6. Combinarea valorilor de transformare

Este timpul să ne uităm la efectele interesante care pot fi obținute prin combinarea diferitelor transformări împreună. Să aplicăm trei acțiuni simultan pentru a schimba obiectul: scalare (scalare), rotire (rotire) și translație (traducere).

Exemplul #7. Combinarea valorilor de transformare

Valoarea inițială: pătrat cu margine neagră. Când treceți cu mouse-ul peste el, se va roti într-un cerc cu un cadru roșu și se va schimba culoarea.

Pagina se transformă în următoarele

7. Alte valori de transformare

Ne-am uitat la cele mai elementare valori de transformare. Să luăm în considerare alte posibilități.

• none - nicio transformare (este activat implicit);
• matrix(x,x,x,x,x,x) - transformare 2D folosind o matrice de 6 valori;
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- Transformare 3D folosind o matrice de 16 valori;
• translate3d(x,y,z) - mișcare 3d (comparativ cu mișcarea normală, aici se adaugă o a treia coordonată);
• scale3d(x,y,z) - scalare în 3d (comparativ cu scalarea normală, aici se adaugă o a treia coordonată);
• rotate3d(x,y,z) - rotație în 3d (comparativ cu rotația obișnuită, aici a fost adăugată o a treia coordonată);
• rotateX(x) - rotație 3d de-a lungul axei X;
• rotateY(x) - rotație 3d de-a lungul axei Y;
• rotateZ(x) - rotație 3d de-a lungul axei Z;
• perspectiva(n) - perspectiva pentru transformarea elementului 3D;

În JavaScript, proprietatea de transformare CSS este disponibilă prin următoarele proprietăți:

object.style.transform="Transformare" document.getElementById("elementID").style.transform = ""

S-ar putea să vă puneți întrebarea „de ce să folosiți transformarea atunci când puteți modifica pur și simplu datele despre obiect după cum avem nevoie, de exemplu, schimbând dimensiunea obiectului?” Diferența este că proprietatea transform nu schimbă alte elemente de pe pagină în timpul transformării. În cazul unei simple modificări a dimensiunii unui obiect, aceasta duce inevitabil la o schimbare a obiectelor învecinate din jur, care, de regulă, este urâtă.

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 î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 a căror valoare de proprietate de afișare este calculată ca table-row , table-row-group , table-header-group , table-footer-group , table-cell sau table-caption . Un element cu orice valoare de proprietate de transformare, alta decât niciuna, este considerat transformat.

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-
Chrome 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 elementele 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.

Traducere: Vlad Merzhevich

Scalarea, deformarea și rotirea oricărui element este posibilă folosind proprietatea de transformare CSS3. Este acceptat de toate browserele 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 imaginea de fundal. Ce se întâmplă dacă doriți doar să rotiți imaginea 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ă, dar 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.

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

Înlocuirea textului cu o imagine

Cea mai primitivă soluție la această problemă ar fi folosirea unei imagini. Folosind binecunoscutul program Adobe Photoshop, textul poate fi rotit cu ușurință în orice unghi. După cum vă puteți imagina, 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 majoritatea cazurilor se îndepărtează de la utilizarea imaginilor. Acest lucru se explică printr-o serie de dezavantaje care însoțesc această tehnică:

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

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

• Compatibilitate între browsere– fără probleme la afișarea în browsere diferite.
• Abilitate ridicată în poziționarea imaginii.

Totuși, în acest caz, aspectele negative depășesc. Vă sfătuiesc să apelați la alte soluții.

Folosind proprietatea de transformare CSS

Costul utilizării acestei metode este mult mai mare în comparație cu imaginea. O diferență semnificativă este făcută de flexibilitatea în editarea textului și de capacitatea de a selecta și copia conținutul unui container rotit. Principala piatră de poticnire pentru dezvoltarea acestei tehnici a fost compatibilitatea între browsere. Acum am obținut rezultate bune pe acest front, ceea ce ne permite să folosim proprietatea transform fără probleme.

Esența modului în care funcționează proprietatea este împărțirea planului în grade. Ca urmare, atunci când este specificat un anumit unghi, containerul va lua poziția corespunzătoare. Este de remarcat faptul că proprietatea nu este utilizată în forma sa pură. Trebuie să fie însoțit de proprietățile furnizorului, care, de fapt, oferă un nivel ridicat de compatibilitate între browsere.

Este important de reținut că nu textul din interiorul blocului își schimbă poziția, ci blocul în sine, la care proprietatea este accesată printr-un selector 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 Explorer și alte browsere webkit.

Manipulare prin Javascript

Esența procesului este complet similară cu metoda discutată anterior. Pentru a-l implementa, aveți nevoie de un minim de cunoștințe de cod js, matematică și o înțelegere a filtrului Matrix.

Javascript

var deg2radians = Math. PI * 2 / 360, grade = - 4; rad = deg * deg2radians, costeta = 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, obținem aceeași imagine în browser ca atunci când folosim proprietatea transform.

Chiar dacă nu înțelegeți niciun simbol în 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 și pur și simplu copiați restul fără modificări.

Caracteristici de utilizare a Javascript și CSS

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

Prima diferență se bazează pe diferența de înălțime a blocului și poziția acestuia. Ieșirea din această situație este destul de simplă și este utilizarea proprietății marjei. Prin indentare setăm blocul la nivelul și poziția dorite. Alte discrepanțe de poziționare pot fi eliminate prin atribuirea unei valori de poziționare absolută blocului, care funcționează și ea eficient.

O abordare mai complexă și personalizată este utilizarea proprietății transform-origin. 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 este la 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

Astăzi ne vom uita la un efect atât de minunat disponibil pentru noi datorită CSS3. Vorbim despre rotirea unui bloc sau a unei imagini. Se potrivește uimitor în interfața site-ului și, stăpânind această lecție, vei putea aplica acest efect în proiectele tale.

Deci, avem un set de blocuri cu ceva conținut. Ne dorim ca atunci când trecem cu mouse-ul peste un bloc, acesta să se rotească în jurul axei sale și să afișeze informații pe spate. Cred că toată lumea a jucat cărți la un moment dat și toată lumea își amintește acel moment interesant când a trebuit să le întoarcă cu fața în sus. Vom face la fel și acum. Iată exemplul nostru original:

Să începem să scriem CSS-ul nostru. Primul lucru pe care trebuie să-l facem, deoarece lucrăm cu transformări 3D, este să setăm distanța obiectului nostru din punct de vedere. Și iată primul cod de rahat:

Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspectiva:1000; )

Puteți specifica orice alt număr. Experimentează pentru tine. Părțile din față (.față) și din spate (.spate) ale cărții noastre de joc trebuie să fie poziționate absolut astfel încât să se „suprapună” reciproc în poziția lor finală. De asemenea, trebuie să ne asigurăm că reversul elementelor răsturnate nu este afișat în timpul animației. Proprietatea backface-visibility ne va ajuta cu aceasta:

Față, .spate ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; lățime:100%; înălțime:100%; poziție: absolut; sus: 0;

Să setăm indexul z pentru partea din față (astfel încât să fie în partea de sus în starea implicită) și să descriem unghiurile de rotație implicite în raport cu axa verticală:

/* partea din față este plasată deasupra părții din spate */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg ); transform: rotateY(0deg); -transformă: rotireY(180deg); -ms-transformă: rotireY(180deg);

Când treceți cu mouse-ul, cărțile noastre se vor roti, unghiurile laturilor lor se vor schimba de la 0 la 180 de grade și de la 180 de grade la 0:

/* partea din față este plasată deasupra părții din spate */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); - ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform:rotateY (0deg); -ms-transform: rotateY(0deg);

Suntem aproape de a ne finaliza munca. Tot ce rămâne este să anunțați browserul cum ar trebui să fie afișate elementele secundare în spațiul 3D. Această proprietate trebuie utilizată împreună cu proprietatea transform și se numește transform-style . Această proprietate ar trebui aplicată unui bloc cu clasa .flipper , și nu .back și .front , altfel vom avea o surpriză neplăcută în browser-ul Opera.

Flipper ( -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:preserve-3d; transform-style: conserva-3d)

Ura, am făcut-o. Tocmai am învățat cum să facem rotația folosind CSS. Cea mai bună parte este că toate browserele moderne îl acceptă. Da, da, utilizatorii din Internet Explorer pot vedea și această frumusețe începând cu versiunea 10. Din păcate, în Rusia a existat o practică vicioasă de a trage de-a lungul unui șir de IE8 și IE9 învechite. Așa că clientul meu a dorit ca un indiciu să fie afișat în browserele mai vechi în momentul trecerii cu mouse-ul. Să vedem ce putem face.

Primul lucru care vă vine în minte este să folosiți directiva @supports. Am putea scrie:

@supports (transform-style: preserve-3d) sau (-moz-transform-style: preserve-3d) sau (-webkit-transform-style: preserve-3d) ( /* stiluri pentru browsere care acceptă */ /* 3D transformă */)

Din păcate, nici măcar IE 11 nu știe nimic despre asta, așa că vom folosi modul de modă veche:

În fișierul ie.css vom descrie stilurile necesare pentru sfatul nostru. Nu o voi prezenta aici, pentru că... este dincolo de scopul acestui articol (și nu este nimic interesant acolo). Dacă doriți, îl puteți vedea în exemplul nostru de rotație verticală folosind CSS. Dar dacă suntem interesați de rotația orizontală? În acest caz, codul nostru este transformat astfel:

Vertical.flip-container ( poziție: relativ; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213.5px; originea transformării: 100% 213.5px; transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg) ;