287 of 313 menu

Funktionen scale

Funktionen scale skalbar ett element: förstorar eller förminskar det i flera gånger. Skalning sker runt punkten som anges av egenskapen transform-origin.

Kan ta en eller två parametrar, uppräknade genom komma. Om det finns två parametrar - den första parametern anger skalning horisontellt, och den andra - vertikalt. Om det bara finns en parameter så anger den skalning både horisontellt och vertikalt samtidigt.

Parametrarnas värden är heltal eller decimaltal. Om det är större än 1 - förstoras elementet, om det är mindre (till exempel 0.5) - förminskas elementet. Om du sätter 1 förändras inget (detta är standardvärdet).

Syntax

selektor { transform: scale(ett eller två tal); }

Exempel

Vid hovring över blocket förstorar vi skalan till 1.5 gånger längs båda axlarna:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1.5); }

:

Exempel

Minska skalan till 2 gånger längs båda axlarna:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(0.5); }

:

Exempel

Förstora skalan till 2 gånger längs X-axeln:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(2, 1); }

:

Exempel

Förstora skalan till 2 gånger längs Y-axeln:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1, 2); }

:

Se även

  • funktionen scaleX,
    som anger skalning längs X-axeln
  • funktionen scaleY,
    som anger skalning längs Y-axeln
Svenska
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa