Šiame straipsnyje mes suprasime „Transform In“ išsamiai ir po to atlikite išsamią praktinę demonstraciją. Tolimesni patarimai bus aptarti šiame straipsnyje,
Tobulėjant svetainės funkcijoms, ne mažiau svarbu protingai integruoti savo svetainę, kad ji būtų patraukli ir geresnė. Valandos poreikis yra pridėti įvairių CSS elementų, kurie papildytų jūsų svetainę.
Žmonės lieka nuo tų svetainių, kurios iš tikrųjų netraukia masių. Taigi, kaip bandyti transformuoti kai kuriuos elementus ir pagražinti CSS su mažesne suspaudimo verte.
Norėdami patenkinti panašius poreikius, mes turime CSS ypatybę, kuri transformuoja elementus juos iškreipdama, pasukdama, pakeisdama mastelį arba verčiant juos.
Toliau su šiuo straipsniu apie „Transform CSS“
kas yra virėjas ir lėlė
Kas yra transformuoti CSS?
CSS elemento transformavimas reiškia suteikti jam kraštą 2D arba 3D forma. Tai vizualiai keičia elemento stilių.
2D transformacija veikia X ir Y ašyse. Norėdami atlikti pakeitimus, galite pateikti bet kurią abiejų ašių briauną ar struktūrą. 3D transformacijai atlikti reikia X, Y ir Z ašių, kad būtų užtikrintas reikalingas gylis.
CSS 2D transformacijos savybės:
| Funkcija | apibūdinimas |
matrica( n, n, n, n, n, n ) | Šešių reikšmių matrica |
versti ( x, y ) | Leidžia elementui judėti išilgai X ir Y ašių |
translateX ( n ) | Leidžia elementui judėti išilgai X ašies |
verstiY ( n ) | Leidžia elementui judėti išilgai Y ašies |
skalė( x, y ) | Pakeičia elementų plotį ir aukštį |
skalėX ( n ) | Pakeičia elemento plotį |
skalė Y ( n ) | Pakeičia elementų aukštį |
pasukti ( kampu ) | Leidžia pasukti elementą kampu, kuris nurodytas parametre |
iškreipti ( x kampas, y kampas ) | Iškreipia elementą išilgai X ir Y ašių |
iškreiptas ( kampu ) | Iškreipia elementą išilgai X ašies |
iškreiptas ( kampu ) | Iškreipia elementą išilgai Y ašies |
CSS 3D transformacijos savybės:
Nuosavybė | apibūdinimas |
transformuotis | Elementui taiko 2D arba 3D transformaciją |
transformuoti-kilmę | Leidžia pakeisti transformuotų elementų padėtį |
transformuoti stilių | Nurodo, kaip įdėti elementai 3D erdvėje |
perspektyva | Nurodo 3D elementų žiūrėjimo perspektyvą |
perspektyva-kilmė | Nurodo apatinę 3D elementų padėtį java deklaruoja objektų masyvą |
galinės dalies matomumas | Nurodo, ar elementas turi būti matomas, kai jis nėra nukreiptas į ekraną |
Pavyzdžiui:
css .element {plotis: 20px aukštis: 20px transformas: skalė (20)}Dabar, kai tai padarysite, apibrėžtas elementas bus pakeistas 20 kartų.
Negana to, jūs taip pat galite išmatuoti ašį horizontaliam masteliui ir vertikaliam masteliui keisti.
transformuoti: skalėX (2) transformuoti: skalėY (.5)
Norėdami užtikrinti tinkamą transformaciją visose naršyklėse, galite:
div {-webkit-transformuoti: mastelis (1,5) -moz-transformuoti: mastelis (1,5) -o-transformuoti: mastelis (1,5) transformuoti: mastelis (1,5)}Transformuojanti CSS ypatybė pagerina CSS vaizdinio formatavimo lygio koordinačių erdvę.
Kas yra vaizdinio formatavimo lygis?
Vizualinio formatavimo lygis reiškia dokumento apdorojimą ir vizualų pateikimą medijos platformose. Naudodami vizualųjį formatavimą, kiekvieną elementą galite paversti modeliu, kuris sutampa su CSS dėžutės modeliu. CSS dėžutės modelis apibrėžia elementą standartiniu stačiakampio formos langelio formatu, apibrėžiančiu dydį, padėtį ir ypatybes.
Pastaba: Galima transformuoti tik transformuojamus elementus.
Toliau su šiuo straipsniu apie „Transform CSS“
Kokios yra įvairios transformacijos savybės?
Pažvelkime į visas transformuojančias savybes:
1. mastelis (): Mastelis reiškia pakeisti elemento dydį horizontaliai arba vertikaliai.
Vertikaliam masteliui:skalėX
Horizontaliam masteliui:skalė Y
Elementui taip pat galite pakeisti šrifto dydį, užpildą, aukštį arba plotį. Numatytoji vertė yra 1, o tai taip pat reiškia, kad pateikiama 0,5, nes vertė perpus mažesnė, o suteikiant 2 dvigubinamas mastelis.
2. iškreipti (): Nukrypimo ypatybė leidžia vartotojui pakreipti elementą į dešinę arba į kairę nuo vieno koordinačių taško. Tai beveik kaip stačiakampio pavertimas lygiagretainiu. Galite iškreipti elementą pagal jo koordinates.
Pavyzdys:
.elementas {transformuoti: skewX (25deg)} .elementas {transformuoti: skewY (25deg)Kai tai padarysite, elementas kreipsis 25 laipsnių kampu horizontaliai ir vertikaliai, naudodamas „skewX“ arba „kreivai“.
3. pasukti ( ) : Naudodami šią ypatybę, elementą galite pasukti pagal laikrodžio rodyklę. Galite pasukti 180 laipsnių arba 360 laipsnių kampu, kad sugrąžintumėte į pradinę vietą.
.element {transformuoti: pasukti (25deg)}Taip pat galite naudoti bet kurį iš trijų matmenų: rotateX, rotateY arba rotateZ.
4. išversti ( ) : Elementą galite tinkamai perkelti aukštyn kojomis arba į šoną.
.element {transformuoti: versti (20px, 10px)}Verčiant objektas / elementas bus perkeltas aukštyn kojomis arba į šoną. Pirmoji nurodyta reikšmė perkelia objektą į dešinę (neigiama - į kairę), o antroji - žemyn (nurodžius neigiamą reikšmę - aukštyn).
kaip mesti programą Java
Jei tai gali jus supainioti, tada pritaikykite X ašį, kad pakeistumėte elemento padėtį horizontaliai, o Y ašys - vertikaliai. Nuostabiausias transformacijos ypatybės aspektas yra tai, kad pritaikius transformaciją elementas galės judėti tik išlaikydamas visus kitus elementus ar tekstus nepažeistus. Atstumas paprastai imamas pikseliais arba procentais.
Pavyzdžiui:
.element {transformuoti: translateX (reikšmė) transformuoti: išverstiY (vertė)}5. perspektyva (): galite pateikti gylį elemento perspektyvoje. Tai leidžia suteikti elementui 3D transformaciją, paverčiant jį transformacijos kubu.
versti3d (x, y, z)
išversti Z (z)
versti3d (x, y, z) verstiZ (z)
Z ašies įvedimas suteikia elementui 3D vizualizaciją. translateZ () elementą perkelia žiūrovo link, o neigiama reikšmė jį atitolina.
6. matrica () : Sujunkite visas transformacijas į vieną.
pasukti (45 laipsnių) versti (24 taškų, 25 taškų)
Taikant matricą (), visos transformacijos savybės sujungiamos į vieną masyvą.
Transformavimo ypatybių taikymas gali labai pagerinti jūsų elementą, taigi ir jūsų svetainę. Išbandykite juos!
Tai leidžia mums baigti šį straipsnį apie „Transform In CSS“.
Jei norite sužinoti daugiau apie žiniatinklio kūrimą, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).
Jei vis tiek domitės Jei turite kokių nors klausimų, galite juos paskelbti šio „Kas yra CSS“ tinklaraščio komentarų skyriuje ir mes kuo greičiau susisieksime su jumis.