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