CSS 2D transformations

CSS 2D transformations

CSS-omvandlingar (transforms) låter dig flytta, rotera, skalera och skjula element.

Håll muspekaren över följande element för att se 2D-omvandlingar:

2D rotate

I detta kapitel kommer du att lära dig följande CSS-egenskaper:

  • transform

Webbläsarstöd

Tal i tabellen anger den första webbläsaren som fullständigt stöder egenskapen.

Egenskap Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D-omvandlingsmetoder

Genom att använda CSS transform Egenskaper, du kan använda följande 2D-omvandlingsmetoder:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Tips:Du kommer att lära dig 3D-omvandlingar i nästa kapitel.

translate() metod

Translate

translate() Metoden flyttar element från dess nuvarande position (enligt parametrar för X- och Y-axeln).

Följande exempel flyttar <div>-elementet 50 pixlar till höger och 100 pixlar ner från dess nuvarande position:

Exempel

div {
  transform: translate(50px, 100px);
}

Prova själv

rotate() metod

Rotate

rotate() Metoden roterar element medurs eller moturs enligt det angivna vinkeln.

Följande exempel roterar <div>-elementet med 20 grader medurs:

Exempel

div {
  transform: rotate(20deg);
}

Prova själv

Använd negativa värden för att rotera element moturs.

Följande exempel roterar <div>-elementet med 20 grader moturs:

Exempel

div {
  transform: rotate(-20deg);
}

Prova själv

scale() metod

Scale

scale() Metoden ökar eller minskar elementets storlek (enligt angivna bredd- och höjdsparametrar).

Följande exempel ökar <div>-elementets bredd till två gånger och höjd till tre gånger dess ursprungliga storlek:

Exempel

div {
  transform: scale(2, 3);
}

Prova själv

Följande exempel minskar <div>-elementets bredd och höjd till hälften av dess ursprungliga storlek:

Exempel

div {
  transform: scale(0.5, 0.5);
}

Prova själv

scaleX() metod

scaleX() Metoden ökar eller minskar elementets bredd.

Följande exempel ökar <div>-elementets bredd till två gånger dess ursprungliga bredd:

Exempel

div {
  transform: scaleX(2);
}

Prova själv

Följande exempel minskar <div>-elementet till hälften av dess ursprungliga bredd:

Exempel

div {
  transform: scaleX(0.5);
}

Prova själv

scaleY() metod

scaleY() Metoden ökar eller minskar elementets höjd.

Följande exempel ökar <div>-elementets höjd till tre gånger dess ursprungliga höjd:

Exempel

div {
  transform: scaleY(3);
}

Prova själv

Följande exempel minskar <div>-elementets höjd till hälften av dess ursprungliga höjd:

Exempel

div {
  transform: scaleY(0.5);
}

Prova själv

skewX() metod

skewX() Metoden lutar elementet längs X-axeln med angiven vinkel.

Följande exempel lutar <div>-elementet 20 grader längs X-axeln:

Exempel

div {
  transform: skewX(20deg);
}

Prova själv

skewY() metod

skewY() Metoden lutar elementet längs Y-axeln med angiven vinkel.

Följande exempel lutar <div>-elementet 20 grader längs Y-axeln:

Exempel

div {
  transform: skewY(20deg);
}

Prova själv

skew() metod

skew() Metoden lutar elementet längs X och Y-axeln med angiven vinkel.

Följande exempel gör att <div>-elementet lutar 20 grader längs X-axeln och 10 grader längs Y-axeln:

Exempel

div {
  transform: skew(20deg, 10deg);
}

Prova själv

Om den andra parametern inte anges är värdet noll. Därför gör följande exempel att <div>-elementet lutar 20 grader längs X-axeln:

Exempel

div {
  transform: skew(20deg);
}

Prova själv

matrix() metod

Rotate

matrix() Metoden kombinerar alla 2D-omvandlingsmetoder till en.

matrix() Metoden accepterar sex parametrar, inklusive matematiska funktioner, som gör det möjligt att rotera, skalera, flytta (translatera) och luta elementet.

Parametrarna är som följer: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Exempel

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Prova själv

CSS-omvandlingsegenskaper

Följande tabell visar alla 2D-omvandlingsegenskaper:

Egenskap Beskrivning
transform Tillämpa 2D eller 3D-omvandling till elementet.
transform-origin Tillåter dig att ändra positionen på det omvandlade elementet.

CSS 2D-omvandlingsmetoder

Funktion Beskrivning
matrix(n,n,n,n,n,n) Definiera 2D-omvandling, använd en sexvärdesmatris.
translate(x,y) Definiera 2D-omvandling, flytta elementet längs X och Y-axeln.
translateX(n) Definiera 2D-omvandling, flytta elementet längs X-axeln.
translateY(n) Definiera 2D-omvandling, flytta elementet längs Y-axeln.
scale(x,y) Define 2D scaling transformation, changing the width and height of the element.
scaleX(n) Define 2D scaling transformation, changing the width of the element.
scaleY(n) Define 2D scaling transformation, changing the height of the element.
rotate(angle) Define 2D rotation, specifying the angle in the parameters.
skew(x-angle,y-angle) Define 2D skew transformation, along the X and Y axes.
skewX(angle) Define 2D skew transformation, along the X-axis.
skewY(angle) Define 2D skew transformation, along the Y-axis.