CSS 2D Transformers

Indholdsfortegnelse

    Vis indholdsfortegnelse

CSS 2D Transformers

CSS-transformationer giver dig mulighed for at flytte, rotere, skalere og skæve elementer.

Hold musen over elementet nedenfor for at se en 2D-transformation:

2D rotate

I dette kapitel lærer du om følgende CSS-egenskab:

transform

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 2D transformationsmetoder

Med CSS-egenskaben transform kan du bruge følgende 2D-transformationsmetoder:

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

Tip: Du vil lære om 3D-transformationer i næste kapitel.

Metoden translate()

Translate

Metoden translate() flytter et element fra dets aktuelle position (ifølge til parametrene givet for X-aksen og Y-aksen).

Følgende eksempel flytter <div>-elementet 50 pixels til højre, og 100 pixels ned fra dens nuværende position:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

Metoden rotate()

Metoden rotate() roterer et element med uret eller mod uret i overensstemmelse med en given grad.

Følgende eksempel roterer <div>-elementet med uret med 20 grader:

Eksempel

div
{
  transform: rotate(20deg);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

Brug af negative værdier vil rotere elementet mod uret.

Følgende eksempel roterer <div>-elementet mod uret med 20 grader:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

Metoden scale()

Scale

Metoden scale() øger eller formindsker størrelsen af et element (i henhold til parametrene angivet for bredden og højden).

Følgende eksempel øger <div>-elementet til at være to gange dets oprindelige bredde og tre gange dets oprindelige højde:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

Følgende eksempel reducerer <div>-elementet til halvdelen af dets oprindelige bredde og højde:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

Metoden scaleX()

Metoden scaleX() øger eller formindsker bredden af et element.

Følgende eksempel øger <div>-elementet til at være to gange dets oprindelige bredde:

Eksempel

div
{
   
transform: scaleX(2);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

Følgende eksempel reducerer <div>-elementet til halvdelen af dets oprindelige bredde:

Eksempel

div
{
   
transform: scaleX(0.5);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

Metoden scaleY()

Metoden scaleY() øger eller formindsker højden af et element.

Følgende eksempel øger <div>-elementet til at være tre gange dets originale højde:

Eksempel

div
{
   
transform: scaleY(3);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

Følgende eksempel reducerer <div>-elementet til at være halvdelen af dets originale højde:

Eksempel

div
{
   
transform: scaleY(0.5);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

Metoden skewX()

Metoden skewX() skæver et element langs X-aksen med den givne vinkel.

Følgende eksempel skæver <div>-elementet 20 grader langs X-akse:

Eksempel

div
{
   
transform: skewX(20deg);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

Metoden skewY()

Metoden skewY() skæver et element langs Y-aksen med den givne vinkel.

Følgende eksempel skæver <div>-elementet 20 grader langs Y-aksen:

Eksempel

div
{
   
transform: skewY(20deg);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

Metoden skew()

Metoden skew() skæver et element langs X- og Y-aksen med de givne vinkler.

Følgende eksempel skæver <div>-elementet 20 grader langs X-aksen og 10 grader langs Y-aksen:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Hvis den anden parameter ikke er angivet, har den en nulværdi. Så det følgende eksempel skæver <div>-elementet 20 grader langs X-aksen:

Eksempel

div
{
   
transform: skew(20deg);
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

Metoden matrix()

Metoden matrix() kombinerer alle 2D-transformationsmetoderne til én.

Matrix()-metoden tager seks parametre, der indeholder matematiske funktioner, som giver dig mulighed for at rotere, skalere, flytte (oversætte) og skæve elementer.

Parametrene er som følger: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

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

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

CSS-transformationsegenskaber

Følgende tabel viser alle 2D-transformationsegenskaber:

transform

Anvender en 2D- eller 3D-transformation til et element

transform-origin

Giver dig mulighed for at ændre positionen på transformerede elementer

CSS 2D transformationsmetoder

matrix(n,n,n,n,n,n)

Definerer en 2D-transformation ved hjælp af en matrix med seks værdier

translate(x,y)

Definerer en 2D-oversættelse, der flytter elementet langs X- og Y-aksen

translateX(n)

Definerer en 2D-oversættelse, der flytter elementet langs X-aksen

translateY(n)

Definerer en 2D-oversættelse, der flytter elementet langs Y-aksen

scale(x,y)

Definerer en 2D-skalatransformation, der ændrer elementernes bredde og højde

scaleX(n)

Definerer en 2D-skalatransformation, der ændrer elementets bredde

scaleY(n)

Definerer en 2D-skalatransformation, der ændrer elementets højde

rotate(angle)

Definerer en 2D-rotation, vinklen er angivet i parameteren

skew(x-angle,y-angle)

Definerer en 2D skæv transformation langs X- og Y-aksen

skewX(angle)

Definerer en 2D skæv transformation langs X-aksen

skewY(angle)

Definerer en 2D skæv transformation langs Y-aksen