Pārveidot - CSS-triki

Anonim

transformĪpašums ļauj vizuāli manipulēt elementu ar maldinoši, pagriežot, tulkojot vai mērogošana:

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

Pat ar deklarēto augstumu un platumu šis elements tagad tiks mērogots divdesmit reizes lielāks par sākotnējo lielumu:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Piešķirot šai funkcijai divas vērtības, tā izstiepsies horizontāli par pirmo un vertikāli par otro. Zemāk redzamajā piemērā elements tagad būs divreiz lielāks nekā sākotnējā elementa platums, bet puse no tā:

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

Vai arī jūs varat būt precīzāks, neizmantojot stenogrāfijas funkciju:

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

Bet tas scale()ir tikai viens no daudzajiem pieejamajām pārveidošanas funkcijām:

Vērtības

  • scale(): Ietekmē elementa lielumu. Tas attiecas arī uz font-size, padding, height, un widthno elementa, too. Tā ir arī scaleXun scaleYfunkciju stenogrāfijas funkcija.
  • skewX()un skewY(): noliek elementu pa kreisi vai pa labi, piemēram, taisnstūri pārvēršot paralelogramā. skew()ir stenogrāfija, kas apvieno skewX()un skewYpieņem abas vērtības.
  • translate(): Pārvieto elementu uz sāniem vai uz augšu un uz leju.
  • rotate(): Pagriež elementu no pašreizējā stāvokļa pulksteņrādītāja kustības virzienā.
  • matrix(): Funkcija, kuru, iespējams, nav paredzēts rakstīt ar roku, bet kurā visas transformācijas tiek apvienotas vienā.
  • perspective(): Neietekmē pašu elementu, bet ietekmē pēcnācēju elementu 3D transformācijas, ļaujot viņiem visiem būt konsekventai dziļuma perspektīvai.

Šķībs

/* 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); )

Funkcijas skewXun skewYpārveidošana elementu slīpina vienā vai otrā virzienā. Atcerieties: elementa šķībošanai nav stenogrāfijas rekvizītu, tāpēc jums būs jāizmanto abas funkcijas. Tālāk sniegtajā piemērā mēs varam sašķiebt 100 x 100 pikseļu laukumu pa kreisi un pa labi ar skewX:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Lai gan šajā piemērā mēs varam vertikāli izkropļot elementu ar skewY:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Tagad izmantosim, skew()lai apvienotu abus:

Vietnē CodePen skatiet
CSS-Tricks (@ css-tricks)
īpašību Pen skew () shorthand .

Pagriezt

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

Tas pagriež elementu pulksteņrādītāja kustības virzienā no sākotnējā stāvokļa, savukārt negatīvā vērtība to pagriezīs pretējā virzienā. Šeit ir vienkāršs animēts piemērs, kur kvadrāts turpina griezties par 360 grādiem ik pēc trim sekundēm:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Mēs varam arī izmantot rotateX, rotateYun rotateZfunkcijas, piemēram, tā:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Tulkot

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

Šī pārveidošanas funkcija pārvieto elementu uz sāniem vai uz augšu un uz leju. Kāpēc neizmantot tikai augšējo / ​​kreiso / apakšējo / ​​labo pusi? Nu, brīžiem tas ir mazliet mulsinoši. Es domātu par tiem kā izkārtojumu / pozicionēšanu (viņiem jebkurā gadījumā ir labāks pārlūka atbalsts), un tas ir veids, kā šīs lietas pārvietot kā daļu no pārejas vai animācijas.

Šīs vērtības būtu jebkura garuma vērtība, piemēram, 10 pikseļi vai 2,4 em. Viena vērtība pārvietos elementu pa labi (negatīvās vērtības pa kreisi). Ja tiek sniegta otrā vērtība, šī otrā vērtība to pārvietos uz leju (negatīvās vērtības uz augšu). Vai arī jūs varat precizēt:

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

Ir svarīgi atzīmēt, ka elements, kas tiek izmantots, transformneradīs apkārt citus elementus. Izmantojot translatezemāk esošo funkciju un izstumjot zaļo kvadrātu no sākotnējās pozīcijas, mēs pamanīsim, kā apkārtējais teksts paliks fiksēts vietā, it kā kvadrāts būtu bloka elements:

Skatiet CSS-Tricks (@ css-tricks) skaidrojumu Pildspalvas pārveidošana vietnē CodePen.

Ir arī vērts atzīmēt, ka translateaparatūra tiks paātrināta, ja atšķirībā no tā vēlaties animēt šo īpašumu position: absolute.

Vairākas vērtības

Izmantojot ar atstarpēm atdalītu sarakstu, transformīpašumam varat pievienot vairākas vērtības :

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

Ir vērts atzīmēt, ka pastāv kārtība, kādā šīs transformācijas tiks veiktas, iepriekš sniegtajā piemērā vispirms tiks veikta `šķībs` un pēc tam elements tiks mērogots.

Matrica

matrixTransformācijas funkciju var izmantot, lai apvienot visus transformācijas vienā. Tas ir mazliet kā transformācijas stenogrāfija, tikai es neticu, ka tas tiešām ir paredzēts rakstīšanai ar roku. Ir tādi rīki kā Matricas izšķirtspējas, kas var pārveidot transformāciju grupu vienā matricas deklarācijā. Iespējams, dažās situācijās tas var samazināt faila lielumu, lai gan autoriem nedraudzīgas mikrooptimizācijas, piemēram, tā, visticamāk, nav jūsu laika vērts.

Ziņkārīgajiem tas:

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

var attēlot arī kā:

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

3D pārveido

Lielākajai daļai iepriekš minēto īpašību ir to 3D versijas.

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

Trešā vērtība translate3dvai vērtība translateZpārvieto elementu pret skatītāju, negatīvās vērtības - prom.

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

Trešā vērtība scale3dvai vērtība scaleZietekmē mērogošanu gar z asi (piemēram, iedomātā līnija nāk tieši no ekrāna).

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

rotateXun rotateYpagriezīs elementu 3D telpā ap šīm asīm. rotate3dļauj 3D telpā norādīt punktu, kurā elementu pagriezt apkārt.

matrix3d(… )

Veids, kā programmiski aprakstīt 3D transformāciju 4 × 4 režģī. Neviens nekad nerakstīs vienu no šīm rokām.

perspective(value)

Šī vērtība neietekmē pašu elementu, bet tā ietekmē pēcnācēju elementu 3D pārveidojumus, ļaujot tiem visiem būt vienotai dziļuma perspektīvai.

Vairāk informācijas

  • MDN dokumenti par pārveidošanu un izmantošanu.
  • Deivida DeSandro dokumentācija par 3D transformācijām
  • Surfin 'Safari: 3D pārveido
  • W3C specifikācija CSS3 transformācijās
  • Ievads CSS 3D transformācijās

Pārlūka atbalsts

2D pārveido

Chrome Safari Firefox Opera IE Android iOS
Jebkurš 3.1+ 3,5+ 10,5+ 9+ 4.1+ Vismaz 4

3D pārveido

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ neviena 10+ 4.1+ 5+

Pārdevēja prefiksi

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