Transformuoti - CSS-gudrybės

Anonim

transformNuosavybė leidžia jums vizualiai manipuliuoti pagal iškreipimo, sukasi, verčiant ar pleiskanojimas elementas:

.element ( width: 20px; height: 20px; transform: scale(20); )

Net ir deklaravus aukštį ir plotį, šis elementas dabar bus padidintas iki dvidešimt kartų didesnio už pradinį dydį:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Suteikus šiai funkcijai, dvi reikšmės ištemps horizontaliai pirmąja, o vertikaliai - antrąja. Žemiau pateiktame pavyzdyje elementas dabar bus dvigubai didesnis nei pusė pirminio elemento aukščio:

.element ( transform: scale(2, .5); )

Arba galite būti konkretesni nenaudodami stenografijos funkcijos:

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

Bet scale()tai tik viena iš daugelio galimų transformavimo funkcijų:

Vertybės

  • scale(): Turi įtakos elemento dydžiui. Tai taip pat taikoma font-size, padding, height, ir widthapie elemento, taip pat. Tai taip pat yra funkcijų scaleXir scaleYfunkcijų trumpoji funkcija.
  • skewX()ir skewY(): pakreipia elementą į kairę arba į dešinę, pavyzdžiui, stačiakampį paversdamas lygiagretainiu. skew()yra trumpinys, kuris sujungia skewX()ir skewYpriima abi vertybes.
  • translate(): Elementą juda šonu arba aukštyn ir žemyn.
  • rotate(): Pasuka elementą pagal dabartinę padėtį pagal laikrodžio rodyklę.
  • matrix(): Funkcija, kurios tikriausiai neketinama rašyti ranka, tačiau visos transformacijos sujungiamos į vieną.
  • perspective(): Neveikia paties elemento, tačiau daro įtaką palikuonių elementų 3D transformacijoms, leidžiančioms visiems turėti nuoseklią gylio perspektyvą.

Iškreipti

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Funkcijos „ skewXir“ skewYtransformuoti elementą pakreipia vienaip ar kitaip. Atminkite: nėra elemento iškraipymo ypatybės, todėl turėsite naudoti abi funkcijas. Toliau pateiktame pavyzdyje mes galime iškreipti 100 x 100 pikselių kvadratą į kairę ir į dešinę skewX:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Nors šiame pavyzdyje elementą galime iškreipti vertikaliai su skewY:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Dabar naudokime skew()abu šiuos dalykus:

Žr Pen
nerijos () Sutrumpintas atributas CSS-Tricks (@ CSS gudrybės)
apie CodePen.

Pasukti

.element ( transform: rotate(25deg); )

Tai pasuks elementą pagal pradinę padėtį pagal laikrodžio rodyklę, o neigiama reikšmė pasuks priešinga kryptimi. Štai paprastas animacinis pavyzdys, kai kvadratas ir toliau pasisuka 360 laipsnių kampu kas tris sekundes:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Mes taip pat gali naudoti rotateX, rotateYir rotateZfunkcijas, kaip ir:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Išversti

.element ( transform: translate(20px, 10px); )

Ši transformavimo funkcija elementą juda į šoną arba aukštyn ir žemyn. Kodėl gi ne tik naudoti viršutinį / kairįjį / apatinį / dešinįjį? Na, kartais tai šiek tiek painu. Aš galvoju apie tai kaip išdėstymą / padėties nustatymą (bet kokiu atveju jie palaiko geresnę naršyklę) ir tai yra būdas perkelti tuos dalykus kaip perėjimo ar animacijos dalį.

Šios vertės būtų bet kokia ilgio reikšmė, pvz., 10 taškų arba 2,4 em. Viena reikšmė perkels elementą į dešinę (neigiamos reikšmės į kairę). Jei pateikiama antroji reikšmė, ta antroji reikšmė ją perkelia žemyn (neigiamos reikšmės į viršų). Arba galite nurodyti:

transform: translateX(value); transform: translateY(value);

Svarbu pažymėti, kad naudojant elementą transformkiti elementai nesukels aplink jį. Naudodami translatetoliau pateiktą funkciją ir išstumdami žalią kvadratą iš pradinės padėties, pastebėsime, kaip aplinkinis tekstas išliks fiksuotas vietoje, tarsi kvadratas būtų blokinis elementas:

Žr. „CSP-Tricks“ (@ css-tricks) „Pen Transform“ paaiškinimą „CodePen“.

Taip pat verta atkreipti dėmesį į tai, kad translateaparatinė įranga bus pagreitinta, jei norite animuoti tą nuosavybę, skirtingai position: absolute.

Kelios vertės

Naudodami sąrašą su tarpais atskirtu sąrašu, galite pridėti kelias ypatybes transform:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Verta paminėti, kad yra tvarka, kuria šios transformacijos bus vykdomos, aukščiau pateiktame pavyzdyje pirmiausia bus atliekamas „iškreipimas“, o tada elementas bus pakeistas.

Matrica

matrixTransformuoti funkcija gali būti naudojama sujungti visas transformacijas į vieną. Tai šiek tiek panašu į transformavimo stenografiją, tik aš netikiu, kad tai tikrai ketinama parašyti ranka. Yra tokių įrankių kaip „Matricos rezoliucijos“, kurie transformacijų grupę gali paversti viena matricos deklaracija. Galbūt kai kuriose situacijose tai gali sumažinti failo dydį, nors autoriui nedraugiška tokia mikropopuliarinimas, ko gero, neverta jūsų laiko.

Smalsuoliams tai:

rotate(45deg) translate(24px, 25px)

taip pat gali būti pavaizduotas kaip:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D transformacijos

Daugumoje aukščiau nurodytų savybių yra jų 3D versijos.

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

Trečioji vertė translate3darba vertė translateZjuda elementą žiūrovo link, o neigiamos - tolyn.

scale3d(sx, sy, sz) scaleZ(sz)

Trečioji vertė scale3darba vertė scaleZturi įtakos mastelio keitimui išilgai z ašies (pvz., Įsivaizduojama tiesė išeina tiesiai iš ekrano).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXir rotateYpasuks elementą 3D erdvėje aplink tas ašis. rotate3dleidžia nurodyti 3D erdvėje tašką, kuriame aplink elementą pasukti.

matrix3d(… )

Būdas programiškai apibūdinti 3D transformaciją 4 × 4 tinklelyje. Niekas niekada tokių nerašys ranka.

perspective(value)

Ši vertė neturi įtakos pačiam elementui, tačiau ji daro įtaką palikuonių elementų 3D transformacijoms, leidžiančioms visiems turėti vienodą gylio perspektyvą.

Daugiau informacijos

  • MDN dokumentai apie transformavimą ir naudojimą.
  • Davido DeSandro 3D transformacijų dokumentacija
  • „Surfin 'Safari“: 3D transformacijos
  • W3C specifikacija CSS3 transformacijoms
  • Įvadas į CSS 3D transformacijas

Naršyklės palaikymas

2D transformacijos

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks 3.1+ 3,5 ir daugiau 10,5+ 9+ 4.1+ Bent 4

3D transformacijos

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
10+ 4+ 12+ nė vienas 10+ 4.1+ 5+

Tiekėjo priešdėliai

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )