Hvordan best utnytte transformasjon i CSS?

I denne artikkelen vil vi forstå hva som er Transform In CSS i detalj og følge det opp med en detaljert praktisk demonstrasjon.

I denne artikkelen vil vi forstå Transform In i detalj og følg den opp med en detaljert praktisk demonstrasjon. Følgende tips vil bli dekket i denne artikkelen,

Med fremgangen i nettstedets funksjoner, er det like viktig å tilby smarte integrasjoner på nettstedet ditt for å gjøre det tiltalende og bedre. Å legge til forskjellige CSS-elementer som komplimenterer nettstedet ditt, er timens behov.
Folk holder seg utenfor nettstedene som ikke appellerer til massene. Så hva med å prøve å transformere noen av elementene og forskjønne CSS med en mindre kompresjonsverdi.
For å oppfylle lignende behov har vi transformert CSS-egenskap som forvandler elementer ved å skjev, rotere, skalere eller oversette dem.



Fortsetter med denne artikkelen om Transform In CSS

Hva er Transform CSS?

Å transformere et CSS-element betyr å gi det en kant i enten 2D- eller 3D-form. Det endrer visuelt utformingen av et element.
2D-transformasjon fungerer på X- og Y-akser. Du kan gi en hvilken som helst kant eller struktur på begge aksene for å gjøre endringer. Mens for 3D-transformasjon, må den jobbe på X-, Y- og Z-akser for å gi den dybden som trengs.

CSS 2D-transformasjonsegenskaper:

Funksjon Beskrivelse

matrise( n, n, n, n, n, n )

Matrise med seks verdier

oversette( x, y )

Lar elementet bevege seg langs X- og Y-aksen

translateX ( n )

Lar elementet bevege seg langs X-aksen

oversette Y ( n )

Lar elementet bevege seg langs Y-aksen

skala ( x, y )

hva er semafor i java

Endrer bredden og høyden på elementene

skalaX ( n )

Endrer bredden på elementet

skalaY ( n )

Endrer elementets høyde

rotere( vinkel )

Lar rotere elementet i en vinkel som er spesifisert i parameteren

skjev ( x-vinkel, y-vinkel )

Skriver elementet langs X- og Y-aksen

skewX ( vinkel )

Sker på elementet langs X-aksen

skjev ( vinkel )

Skrur elementet langs Y-aksen

CSS 3D-transformasjonsegenskaper:

Eiendom

Beskrivelse

forvandle

Bruker en 2D- eller 3D-transformasjon til et element

transform-opprinnelse

Lar deg endre posisjonen på transformerte elementer

transform-stil

Spesifiserer hvordan nestede elementer gjengis i 3D-rom

perspektiv

Spesifiserer perspektivet på hvordan 3D-elementer blir sett på

perspektiv-opprinnelse

Spesifiserer bunnposisjonen til 3D-elementer

lage en koblet liste i c

synlighet på baksiden

Definerer om et element skal være synlig eller ikke når det ikke vender mot skjermen

For eksempel:

css .element {bredde: 20px høyde: 20px transform: skala (20)}

Nå, når du gjør det, skal det definerte elementet skaleres 20 ganger.

Eksempel- Transform CSS- Edureka

Ikke bare dette, du kan også skalere aksemessig for horisontal skalering og vertikal skalering.

transform: scaleX (2) transform: scaleY (.5)

For å gi en skikkelig transformasjon i alle nettlesere kan du:

div {-webkit-transform: skala (1.5) -moz-transform: skala (1.5) -o-transform: skala (1.5) transform: skala (1.5)}

Transform CSS-egenskapen forbedrer koordinatområdet til CSS-visuelle formateringsnivå.
Hva er visuelt formateringsnivå?
Visuelt formateringsnivå betyr å behandle et dokument og visuelt presentere det på medieplattformene. Med visuell formatering kan du transformere hvert element som en modell som stemmer overens med CSS-boksmodellen. CSS-boksmodell definerer et element i et standard rektangulært boksformat som definerer størrelse, posisjon og egenskaper.
Merk: Bare transformerbare elementer kan transformeres.

Fortsetter med denne artikkelen om Transform In CSS

Hva er de forskjellige transformasjonsegenskapene?

La oss se på alle transformasjonsegenskapene:

1. skala (): Skalering betyr å endre størrelsen på elementet enten horisontalt eller vertikalt.

For vertikal skalering:skalaX

For horisontal skalering:skalaY

For et element kan du også endre skriftstørrelse, polstring, høyde eller bredde. Standardverdien er 1, noe som også betyr å gi 0,5 når verdien halveres mens den gir 2 dobler skaleringen.

2. skjev (): Skew-egenskap tillater en bruker å vippe et element mot høyre eller venstre fra ett koordinatpunkt. Det er nesten som å gjøre et rektangel om til et parallellogram. Du kan skje et element etter koordinatene.

Eksempel:

.element {transform: skewX (25deg)} .element {transform: skewY (25deg)

Når du gjør det, skjever elementet 25 grader horisontalt og vertikalt ved å bruke skewX eller skewY.

3. roter ( ) : Du kan rotere et element med klokken ved å bruke denne egenskapen. Du kan rotere den 180 grader eller 360 grader for å bringe den tilbake til sin opprinnelige plass.

.element {transform: roter (25deg)}

For å tilby rotasjon også, kan du bruke en av de tre dimensjonene: rotateX, rotateY eller rotateZ.

4. oversett ( ) : Du kan flytte et element ordentlig opp ned eller sidelengs.

.element {transform: translate (20px, 10px)}

Translate vil flytte et spesifisert objekt / element opp ned eller sidelengs. Den første spesifiserte verdien flytter objektet mot høyre (negativt vil flytte det til venstre) og den andre verdien flytter det ned (hvis du angir en negativ verdi, flytter det det oppover).

Hvis dette kan forvirre deg, bruk X-aksen for å endre posisjonen til elementet horisontalt og Y-aksene for å endre posisjonen vertikalt. Det mest fantastiske aspektet ved transformasjonsegenskap er at bruk av transform bare lar elementet bevege seg, og holder hvert annet element eller tekst intakt. Avstanden tas vanligvis i piksler eller prosenter.

For eksempel:

.element {transform: translateX (value) transform: translateY (value)}

5. perspektiv (): Du kan gi en dybde i perspektivet til et element. Det gjør det mulig å gi en 3D-transformasjon til et element ved å gjøre det kubisk i transformasjonen.
translate3d (x, y, z)
oversetteZ (z)

translate3d (x, y, z) translateZ (z)

Innføringen av z-aksen gir elementet en 3D-visualisering. translateZ () flytter elementet mot betrakteren mens en negativ verdi flytter det bort.

6. matrise () : Kombiner alle transformasjonene til en.

hvordan gå ut i java
roter (45deg) translate (24px, 25px)

Bruk av matrise () kombinerer alle transformasjonsegenskapene i en matrise.

Å bruke transformasjonsegenskaper kan forbedre elementet ditt, og dermed nettstedet ditt. Prøv dem!

Dette bringer oss til slutten av denne artikkelen om Transform In CSS.

Hvis du er interessert i å lære mer om nettutvikling, kan du sjekke ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Hvis du fremdeles er interessert. Hvis du har spørsmål, kan du legge det ut i kommentarfeltet på denne 'Hva er CSS' -bloggen, så vil vi komme tilbake til deg så snart som mulig.