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

• 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 î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 un sistem de coordonate invers, deoarece pagina web începe în 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ă personalizaț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ă recomandăm să aruncați o privire la cursul de lecții „HTML și CSS în 30 de zile” (gratuit și în limba engleză) pentru a învăța tot ce aveți 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 a acestei mișcări. 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-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: 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 un nou document html și inseraț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 să se ridice și să valorizeze 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 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 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.

Proprietatea de transformare CSS (de la 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 chenar negru. 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 se adaugă 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 când puteți modifica pur și simplu datele obiectului după cum avem nevoie. De exemplu, modificând dimensiunea obiectului?” Diferența este că proprietatea de transformare 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ă.

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. Dorim ca atunci când trecem cu mouse-ul peste un bloc, acesta se va roti în jurul axei sale și va afișa 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; stânga: 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); z-index: 2; ) /* invers, partea ascunsă inițial */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz -transform: rotițiY(180deg); -ms-transform: rotițiY(180deg); -o-transform: rotițiY(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); ) /* invers, partea ascunsă inițial */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz -transform:rotateY (0grade); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transforma: 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 copil î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 sfat explicativ 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,5 px; originea transformării: 100% 213,5 px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz -transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); ) .vertical .back, .vertical.flip-container:hover . front, .vertical.flip-container.hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX( 180deg); transformare: rotateX(180deg); )

Funcția rotate() din 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 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 dintr-o valoare numerică și o unitate de măsură grad (de la gradul englez - 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.

Prin standard, este nevoie de trei parametri care specifică 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 de lungime valide, un procent din dimensiunea blocului sau folosind cuvintele 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); )

Nu se aplică nicio transformare elementului original, 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ă.

O modalitate mai complexă de a anima un obiect este de a defini secvența sa de cadre 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, determinându-l să se rotească 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 in cu transformări de rotație vă permite să creați efecte dinamice frumoase.

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:

#elementulmeu ( -webkit-transform: rotiți(30deg); -moz-transform: rotiți(30deg); -ms-transform: rotiți(30deg); -o-transform: rotiți(30deg); transform: rotiți(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 pseudo-elementului :before sau :after, mai degrabă decât containerului 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); -moz-transform: rotire (30deg); -ms-transform: rotire (30deg); -o-transform: rotire (30deg); transformare: 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) ; transforma: rotiți(30deg); ) #elementul meu:înainte ( conținut: ""; poziție: absolut; lățime: 200%; înălțime: 200%; sus: -50%; stânga: -50%; index z: - 1; fundal: url(background.png) 0 0 repetare; -webkit-transform: rotire(-30deg); -moz-transform: rotire(-30deg); -ms-transform: rotire(-30deg); -o- transformare: rotire(-30deg); transformare: 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.