Tässä artikkelissa ymmärretään Transform In ja seuraa sitä yksityiskohtaisella käytännön esittelyllä. Seuraavat vihjeet käsitellään tässä artikkelissa,
Sivuston toimintojen kehittyessä on yhtä tärkeää tarjota älykkäitä integraatioita verkkosivustollesi, jotta se olisi houkutteleva ja parempi. Tunnin tarve on lisätä erilaisia CSS-elementtejä, jotka täydentävät sivustoasi.
Ihmiset pysyvät poissa verkkosivustojen ulkopuolella, jotka eivät todellakaan houkuttele massoja. Joten, miten yrität muuttaa joitain elementtejä ja kaunistaa CSS: ääsi pienemmällä pakkausarvolla.
Vastaavien tarpeiden täyttämiseksi meillä on CSS-ominaisuus, joka muuntaa elementit joko vinomalla, kiertämällä, skaalaamalla tai kääntämällä niitä.
Siirtyminen tähän artikkeliin Transform CSS: stä
Mikä on CSS-muunnos?
CSS-elementin muuttaminen tarkoittaa sen tarjoamista reunalle joko 2D- tai 3D-muodossa. Se muuttaa visuaalisesti elementin tyyliä.
2D-muunnos toimii X- ja Y-akseleilla. Voit tehdä minkä tahansa reunan tai rakenteen molemmille akseleille muutosten tekemiseksi. 3D-muunnosta varten sen on toimittava X-, Y- ja Z-akseleilla tarvittavan syvyyden aikaansaamiseksi.
CSS 2D -muunnosominaisuudet:
| Toiminto | Kuvaus |
matriisi( n, n, n, n, n, n ) | Kuuden arvon matriisi |
Kääntää( x, y ) | Antaa elementin liikkua X- ja Y-akselia pitkin |
translateX ( n ) | Antaa elementin liikkua X-akselia pitkin mikä on papu java |
käännäY ( n ) | Antaa elementin liikkua Y-akselia pitkin |
asteikko ( x, y ) | Muuttaa elementtien leveyttä ja korkeutta |
scaleX ( n ) | Muuttaa elementin leveyttä |
mittakaavaY ( n ) | Muuttaa elementtien korkeutta |
kiertää( kulma ) | Antaa elementin kiertämisen parametrissa määritetyssä kulmassa |
vinossa( x-kulma, y-kulma ) | Vino elementti X- ja Y-akselia pitkin |
vinousX ( kulma ) | Vääntää elementin X-akselia pitkin |
vinossa ( kulma ) | Vääntää elementin Y-akselia pitkin |
CSS 3D -muunnosominaisuudet:
Omaisuus | Kuvaus |
muuttaa | Lisää 2D- tai 3D-muunnoksen elementtiin |
muunnos-alkuperä | Voit muuttaa muunnettujen elementtien sijaintia |
muunneltava | Määrittää, kuinka sisäkkäiset elementit renderoidaan 3D-tilassa |
näkökulmasta | Määrittää perspektiivin 3D-elementtien katselemiselle |
perspektiivi-alkuperä | Määrittää 3D-elementtien alaosan merkkijono vakio pool java |
taustanäkyvyys | Määrittää onko elementin oltava näkyvissä, kun se ei ole näyttöä vasten |
Esimerkiksi:
css .element {leveys: 20px korkeus: 20px muunnos: asteikko (20)}Nyt kun teet niin, määritettyä elementtiä skaalataan 20 kertaa.
Tämän lisäksi voit skaalata akselin tarkasti vaaka- ja pystysuuntaiseen skaalaukseen.
muunnos: scaleX (2) muunnos: scaleY (.5)
Oikean muunnoksen tarjoamiseksi kaikissa selaimissa voit:
div {-webkit-muunna: asteikko (1,5) -moz-muunnos: asteikko (1,5) -o-muunnos: asteikko (1,5) muunnos: asteikko (1,5)}Muunnos CSS -ominaisuus parantaa CSS-visuaalisen muotoilutason koordinaatitilaa.
Mikä on visuaalinen muotoilutaso?
Visuaalinen muotoilutaso tarkoittaa asiakirjan käsittelyä ja visuaalista esittämistä mediaympäristöissä. Visuaalisella muotoilulla voit muuttaa jokaisen elementin malliksi, joka on sopusoinnussa CSS-laatikkomallin kanssa. CSS-laatikkomalli määrittää elementin tavallisessa suorakulmaisessa laatikkomuodossa, joka määrittelee koon, sijainnin ja ominaisuudet.
Huomautus: Vain transformoitavia elementtejä voidaan muuttaa.
Siirtyminen tähän artikkeliin Transform CSS: stä
Mitkä ovat erilaiset muunnosominaisuudet?
Tarkastellaan kaikkia transformoivia ominaisuuksia:
mikä on sarjoitettavissa jaavassa
1. mittakaava (): Skaalaus tarkoittaa elementin koon muuttamista joko vaaka- tai pystysuunnassa.
Pystysuuntaiseen skaalaukseen:asteikko X
Vaakasuuntaiseen skaalaukseen:asteikkoY
Elementin osalta voit myös muuttaa fontin kokoa, täytettä, korkeutta tai leveyttä. Oletusarvo on 1, mikä tarkoittaa myös 0,5: n antamista, kun arvo puolittaa sen, kun taas arvo 2 kaksinkertaistaa skaalauksen.
2. vinous (): Vino-ominaisuuden avulla käyttäjä voi kallistaa elementtiä oikealle tai vasemmalle yhdestä koordinaattipisteestä. Se on melkein kuin suorakulmion muuttaminen suuntaissuunnaksi. Voit vinota elementtiä sen koordinaattien mukaan.
Esimerkki:
.element {transform: vinoX (25deg)} .element {muunnos: vino (25deg)Kun teet niin, elementti vinoutuu 25 astetta vaaka- ja pystysuunnassa käyttämällä vinossa X tai vinossa.
3. kiertää ( ) : Voit kiertää elementtiä myötäpäivään käyttämällä tätä ominaisuutta. Voit palauttaa sen takaisin alkuperäiseen paikkaan kääntämällä sitä 180 astetta tai 360 astetta.
.elementti {muuntaa: kiertää (25 astetta)}Myös pyörimisen tarjoamiseksi voit käyttää mitä tahansa kolmesta ulottuvuudesta: rotateX, rotateY tai rotateZ.
4. käännä ( ) : Voit siirtää elementtiä oikeinpäin ylösalaisin tai sivuttain.
.element {muunna: käännä (20px, 10px)}Käännä siirtää määritetyn kohteen / elementin ylösalaisin tai sivuttain. Ensimmäinen määritetty arvo siirtää objektin oikealle osastolle (negatiivinen siirtää sen vasemmalle puolelle) ja toinen arvo siirtää sen alas (negatiivisen arvon määrittäminen siirtää sen ylöspäin).
Jos tämä saattaa hämmentää sinua, muuta X-akselia muuttaaksesi elementin sijaintia vaakasuunnassa ja Y-akselia muuttaaksesi sijaintia pystysuunnassa. Hämmästyttävin osa muunnosominaisuudesta on se, että muunnoksen soveltaminen antaa elementin vain liikkua pitäen kaikki muut elementit tai tekstit ehjinä. Etäisyys otetaan yleensä pikseleinä tai prosentteina.
Esimerkiksi:
.element {muuntaa: translateX (arvo) muuntaa: kääntääY (arvo)}5. näkökulma (): Voit antaa syvyyden elementin perspektiiviin. Sen avulla elementille voidaan antaa 3D-muunnos tekemällä siitä kuutiomainen muunnoksessa.
käännä3d (x, y, z)
kääntää Z (z)
kääntää3d (x, y, z) kääntääZ (z)
Z-akselin käyttöönotto antaa elementille 3D-visualisoinnin. translateZ () siirtää elementin katsojaa kohti, kun taas negatiivinen arvo siirtää sen pois.
6. matriisi () : Yhdistä kaikki muunnokset yhdeksi.
kiertää (45 astetta) kääntää (24 kuvapistettä, 25 kuvapistettä)
Matriisin () soveltaminen yhdistää kaikki muunnosominaisuudet yhteen matriisiin.
Muunnosominaisuuksien soveltaminen voi parantaa elementtiäsi ja siten verkkosivustosi vetovoimaa. Kokeile niitä!
Tämä tuo meidät tämän Transform In CSS -artikkelin loppuun.
Jos haluat oppia lisää verkkokehityksestä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Jos olet edelleen kiinnostunut Jos sinulla on kysyttävää, voit lähettää sen tämän 'Mikä on CSS' -blogin kommenttiosioon, ja otamme sinuun yhteyttä mahdollisimman pian.