I denne artikel vil vi forstå Transform In detaljeret og følg den op med en detaljeret praktisk demonstration. Følgende punkter vil blive dækket i denne artikel,
Med fremskridt i webstedsfunktionaliteterne er det lige så vigtigt at tilbyde smarte integrationer på dit websted for at gøre det tiltalende og bedre. Tilføjelse af forskellige CSS-elementer, der komplimenterer dit websted, er timens behov.
Folk holder sig væk fra de websteder, der ikke rigtig appellerer til masserne. Så hvad med at prøve at transformere nogle af elementerne og forskønne din CSS med en mindre kompressionsværdi.
For at opfylde lignende behov har vi transformeret CSS-egenskab, der transformerer elementer ved enten at skæve, rotere, skalere eller oversætte dem.
Fortsætter med denne artikel om Transform In CSS
Hvad er transform CSS?
Transformering af et CSS-element betyder at give det en kant i enten 2D- eller 3D-form. Det ændrer visuelt stylingen af et element.
2D-transformation fungerer på X- og Y-akser. Du kan angive en hvilken som helst kant eller struktur på begge akser for at foretage ændringer. Mens det er til 3D-transformation, skal det arbejde på X-, Y- og Z-akser for at give den nødvendige dybde.
CSS 2D-transformeringsegenskaber:
| Fungere | Beskrivelse |
matrix ( n, n, n, n, n, n ) | Matrix med seks værdier |
Oversætte( x, y ) | Tillader, at elementet bevæger sig langs X- og Y-aksen |
translateX ( n ) | Tillader, at elementet bevæger sig langs X-aksen |
oversætY ( n ) | Tillader, at elementet bevæger sig langs Y-aksen |
vægt( x, y ) | Ændrer bredden og højden på elementerne |
skalaX ( n ) | Ændrer elementets bredde |
skalaY ( n ) | Ændrer elementets højde |
rotere( vinkel ) | Tillader at rotere elementet i en vinkel, der er angivet i parameteren |
skæv ( x-vinkel, y-vinkel ) | Skæv elementet langs X- og Y-aksen |
skewX ( vinkel ) | Skæv elementet langs X-aksen |
skæv ( vinkel ) | Skæv elementet langs Y-aksen |
CSS 3D-transformeringsegenskaber:
Ejendom | Beskrivelse |
transformere | Anvender en 2D- eller 3D-transformation på et element |
transform-oprindelse | Giver dig mulighed for at ændre positionen på transformerede elementer |
transform-stil | Angiver, hvordan indlejrede elementer gengives i 3D-rum |
perspektiv | Angiver perspektivet på, hvordan 3D-elementer ses |
perspektiv-oprindelse | Angiver bundpositionen for 3D-elementer |
synlighed på bagsiden | Definerer, om et element skal være synligt, når det ikke vender mod skærmen |
For eksempel:
css .element {bredde: 20px højde: 20px transform: skala (20)}Nu, når du gør det, skaleres det definerede element 20 gange.
Ikke kun dette, du kan også skalere aksevis til vandret skalering og lodret skalering.
mysql workbench tutorial til begyndere
transform: scaleX (2) transform: scaleY (.5)
For at give en ordentlig transformation på tværs af alle browsere kan du:
div {-webkit-transform: skala (1.5) -moz-transform: skala (1.5) -o-transform: skala (1.5) transform: skala (1.5)}Transform CSS-egenskaben forbedrer koordinatområdet for det CSS-visuelle formateringsniveau.
Hvad er visuelt formateringsniveau?
Visuelt formateringsniveau betyder at behandle et dokument og visuelt præsentere det på medieplatformene. Med visuel formatering kan du transformere hvert element som en model, der stemmer overens med CSS-boksmodellen. CSS-boksmodel definerer et element i et standard rektangulært boksformat, der definerer størrelse, position og egenskaber.
Bemærk: Kun transformerbare elementer kan transformeres.
Fortsætter med denne artikel om Transform In CSS
Hvad er de forskellige transformationsegenskaber?
Lad os se på alle de transformerende egenskaber:
1. skala (): Skalering betyder at ændre størrelsen på elementet enten vandret eller lodret.
Til lodret skalering:skalaX
Til vandret skalering:skalaY
For et element kan du også ændre skriftstørrelse, polstring, højde eller bredde. Standardværdien er 1, hvilket også betyder at give 0,5, da værdien halveres, mens du giver 2 fordobler skaleringen.
2. skæv (): Skæv egenskab giver brugeren mulighed for at vippe et element til højre eller venstre fra et koordinatpunkt. Det er næsten som at gøre et rektangel til et parallelogram. Du kan skæve et element efter dets koordinater.
Eksempel:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Når du gør det, vrides elementet 25 grader vandret og lodret ved hjælp af skewX eller skewY.
3. roter ( ) : Du kan rotere et element med uret ved hjælp af denne egenskab. Du kan dreje det 180 grader eller 360 grader for at bringe det tilbage til dets oprindelige sted.
.element {transform: roter (25deg)}For at levere rotation også kan du bruge en af de tre dimensioner: rotateX, rotateY eller rotateZ.
4. oversæt ( ) : Du kan flytte et element ordentligt på hovedet eller sidelæns.
.element {transform: translate (20px, 10px)}Translate flytter et angivet objekt / element på hovedet eller sidelæns. Den første specificerede værdi flytter objektet til højre mod (negativ flytter det til venstre), og den anden værdi flytter det ned (hvis en negativ værdi angives, flyttes det opad).
Hvis dette kan forvirre dig, skal du anvende X-aksen for at ændre elementets position vandret og Y-akserne for at ændre positionen lodret. Det mest fantastiske aspekt ved transform-egenskab er, at anvendelse af transform kun tillader elementet at bevæge sig, hvilket holder hvert andet element eller tekst intakt. Afstanden tages generelt i pixels eller procentdele.
For eksempel:
.element {transform: translateX (værdi) transform: translateY (værdi)}5. perspektiv (): Du kan give en dybde i elementets perspektiv. Det giver mulighed for at give en 3D-transformation til et element ved at gøre det kubisk i transformationen.
translate3d (x, y, z)
oversæt Z (z)
translate3d (x, y, z) translateZ (z)
Introduktionen af z-aksen giver elementet en 3D-visualisering. translateZ () flytter elementet mod seeren, mens en negativ værdi flytter det væk.
6. matrix () : Kombiner alle transformationer til en.
roter (45deg) oversæt (24px, 25px)
Anvendelse af matrix () kombinerer alle transformationsegenskaberne i et array.
Anvendelse af transformeringsegenskaber kan i høj grad forbedre dit element og derfor din websides appel. Prøv dem!
Dette bringer os til slutningen af denne artikel om Transform In CSS.
Hvis du er interesseret i at lære mere om webudvikling, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).
Hvis du stadig er interesseret Hvis du har spørgsmål, kan du sende det i kommentarsektionen på denne 'Hvad er CSS' -blog, og vi vender tilbage til dig hurtigst muligt.