skew-funktio

skew-funktio asettaa elementin vinouman, muuttaen sen siten suorakulmiosta suunnikkaaksi. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona on kulma missä tahansa kulmayksikössä. Vinoaminen tapahtuu transform-origin-ominaisuudella määritetyn pisteen ympäri.

Voi ottaa yhden tai kaksi parametria, jotka erotetaan pilkulla. Jos parametreja on kaksi - ensimmäinen parametri asettaa vaakatasoon vinouman ja toinen - pystytasoon. Jos parametri on yksi - se asettaa vinouman vaakatasossa (ei molempiin suuntiin). Parametrit voivat olla joko positiivisia tai negatiivisia.

Syntaksi

cssvalitsija {
  transform: skew(yksi tai kaksi kulmaa);
}

Esimerkki

Tässä esimerkissä lohkoa vinotetaan 30 astetta vasemmalle:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esimerkki

Tässä esimerkissä lohkoa vinotetaan 30 astetta oikealle:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esimerkki

Tässä esimerkissä lohkoa vinotetaan 30 astetta pystysuunnassa (positiivinen arvo):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esimerkki

Tässä esimerkissä lohkoa vinotetaan 30 astetta pystysuunnassa (negatiivinen arvo):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esimerkki

Asetetaan vinous samanaikaisesti X- ja Y-akseleilla:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Katso myös