În acest articol vom înțelege Transform In în detaliu și urmăriți-l cu o demonstrație practică detaliată. Următoarele indicații vor fi tratate în acest articol,
Odată cu avansarea funcționalităților site-ului, este la fel de important să oferiți integrări inteligente pe site-ul dvs. web pentru a-l face atrăgător și mai bun. Adăugarea diferitelor elemente CSS care completează site-ul dvs. sunt nevoia orei.
Oamenii stau în afara site-urilor care nu prea atrag masele. Deci, ce zici de încercarea de a transforma unele dintre elemente și de a vă înfrumuseța CSS cu o valoare de compresie mai mică.
Pentru a îndeplini nevoi similare, am transformat proprietatea CSS care transformă elementele fie prin înclinare, rotire, redimensionare sau traducere a acestora.
Continuăm cu acest articol despre Transform In CSS
Ce este transformarea CSS?
Transformarea unui element CSS înseamnă a-i oferi o margine în formă 2D sau 3D. Schimbă vizual stilul unui element.
Transformarea 2D funcționează pe axele X și Y. Puteți furniza orice margine sau structură pe ambele axe pentru a face modificări. În timp ce pentru transformarea 3D, trebuie să funcționeze pe axele X, Y și Z pentru a oferi adâncimea necesară.
Proprietăți de transformare CSS 2D:
| Funcţie | Descriere |
matrice( n, n, n, n, n, n ) | Matrice de șase valori |
Traduceți( X y ) | Permite elementului să se deplaseze de-a lungul axelor X și Y |
traducereX ( n ) | Permite elementului să se deplaseze de-a lungul axei X. |
traduce Y ( n ) | Permite elementului să se deplaseze de-a lungul axei Y. |
scară( X y ) | Modifică lățimea și înălțimea elementelor |
scaleX ( n ) | Modifică lățimea elementului |
scaleY ( n ) | Modifică înălțimea elementelor |
roti( unghi ) | Permite rotirea elementului într-un unghi specificat în parametru |
oblic( unghiul x, unghiul y ) | Distorsionează elementul de-a lungul axelor X și Y. |
skewX ( unghi ) | Distorsionează elementul de-a lungul axei X. |
slab ( unghi ) | Distorsionează elementul de-a lungul axei Y. |
Proprietăți de transformare CSS 3D:
Proprietate | Descriere ce este un impas în Java |
transforma | Aplică o transformare 2D sau 3D unui element |
transformare-origine | Vă permite să schimbați poziția pe elementele transformate |
în stil transformat | Specifică modul în care sunt redate elementele imbricate în spațiul 3D |
perspectivă | Specifică perspectiva modului în care sunt vizualizate elementele 3D |
perspectivă-origine | Specifică poziția de jos a elementelor 3D |
vizibilitate în spate | Definește dacă un element trebuie să fie vizibil sau nu atunci când nu este orientat spre ecran |
De exemplu:
css .element {width: 20px height: 20px transform: scale (20)}Acum, când faceți acest lucru, elementul definit va fi scalat de 20 de ori.
Nu numai acest lucru, puteți, de asemenea, să ajustați axele pentru scalarea orizontală și verticală.
transformare: scaleX (2) transformare: scaleY (.5)
Pentru a oferi o transformare adecvată în toate browserele puteți:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Proprietatea CSS transformă îmbunătățește spațiul de coordonate al nivelului de formatare vizuală CSS.
Ce este nivelul de formatare vizuală?
Nivelul de formatare vizuală înseamnă procesarea unui document și prezentarea vizuală a acestuia pe platformele media. Cu formatarea vizuală, puteți transforma fiecare element ca un model care este de acord cu modelul casetei CSS. Modelul de cutie CSS definește un element într-un format standard de cutie dreptunghiulară care definește dimensiunea, poziția și proprietățile.
Notă: Numai elementele transformabile pot fi transformate.
Continuăm cu acest articol despre Transform In CSS
Care sunt diferitele proprietăți de transformare?
Să vedem toate proprietățile de transformare:
1. scară (): Scalarea înseamnă schimbarea dimensiunii elementului orizontal sau vertical.
Pentru scalare verticală:scaleX
Pentru scalare orizontală:scaleY
Pentru un element, puteți schimba, de asemenea, dimensiunea fontului, umplutura, înălțimea sau lățimea. Valoarea implicită este 1, ceea ce înseamnă, de asemenea, furnizarea de 0,5, deoarece valoarea o înjumătățește, oferind în același timp 2 dublează scalarea.
2. înclinare (): Proprietatea de înclinare permite utilizatorului să încline un element spre dreapta sau spre stânga dintr-un punct de coordonate. Este aproape ca transformarea unui dreptunghi într-un paralelogram. Puteți distorsiona un element după coordonatele sale.
Exemplu:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Când faceți acest lucru, elementul înclină 25 de grade pe orizontală și verticală utilizând skewX sau skewY.
3. rotire ( ) : Puteți roti un element în sensul acelor de ceasornic folosind această proprietate. Puteți să o rotiți cu 180 de grade sau 360 de grade pentru a o readuce la locul său inițial.
.element {transform: rotate (25deg)}Pentru furnizarea de rotație, puteți utiliza oricare dintre cele trei dimensiuni: rotateX, rotateY sau rotateZ.
4. traduce ( ) : Puteți deplasa corect un element cu capul în jos sau lateral.
.element {transform: translate (20px, 10px)}Traducerea va muta un obiect / element specificat invers sau lateral. Prima valoare specificată mută obiectul spre secțiunile din dreapta (negativ îl va deplasa spre stânga) și a doua valoare îl mută în jos (specificarea unei valori negative îl va deplasa în sus).
Dacă acest lucru vă poate deruta, aplicați axa X pentru a schimba poziția elementului pe orizontală și axele Y pentru a schimba poziția pe verticală. Cel mai uimitor aspect despre proprietatea de transformare este că, aplicarea transformării va permite doar elementului să se miște, păstrând orice alt element sau text intact. Distanța este în general luată în pixeli sau procente.
De exemplu:
.element {transform: translateX (valoare) transform: translateY (valoare)}5. perspectivă (): Puteți oferi o profunzime în perspectiva unui element. Permite acordarea unei transformări 3D unui element făcându-l cubic în transformare.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Introducerea axei z oferă elementului o vizualizare 3D. translateZ () mută elementul spre vizualizator în timp ce o valoare negativă îl îndepărtează.
6. matrice () : Combinați toate transformările într-o singură.
rotire (45 de grade) traducere (24 px, 25 px)
Aplicarea matricei () combină toate proprietățile de transformare într-o matrice.
implementarea cozii prioritare în java
Aplicarea proprietăților de transformare vă poate îmbunătăți considerabil elementul și, prin urmare, atrageți site-ul web. Încercați-le!
Acest lucru ne aduce la sfârșitul acestui articol despre Transform In CSS.
Dacă sunteți interesat să aflați mai multe despre dezvoltarea web, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Dacă sunteți încă interesat Dacă aveți vreo întrebare, ați putea să o postați în secțiunea de comentarii a acestui blog „Ce este CSS” și vă vom răspunde cât mai curând posibil.