CSS 2D Transformers


Innehållsförteckning

    Visa innehållsförteckning


CSS 2D Transformers

CSS-transformationer låter dig flytta, rotera, skala och skeva element.

För muspekaren över elementet nedan för att se en 2D-transformation:

2D rotate

I det här kapitlet kommer du att lära dig om följande CSS-egenskap:

transform

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.

Property
transform 36.0
10.0
16.0
9.0
23.0

CSS 2D-omvandlingsmetoder

Med CSS-egenskapen transform kan du använda följande 2D-transformationsmetoder:

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

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


Metoden translate()

Translate

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

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

Exempel

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

Prova själv →

<!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() roterar ett element medurs eller moturs enligt en given grad.

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

Exempel

div
{
  transform: rotate(20deg);
}

Prova själv →

<!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>


Användning av negativa värden kommer att rotera elementet moturs.

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

Exempel

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

Prova själv →

<!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() ökar eller minskar storleken på ett element (enligt de parametrar som anges för bredd och höjd).

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

Exempel

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

Prova själv →

<!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öljande exempel minskar <div>-elementet till hälften av dess ursprungliga bredd och höjd:

Exempel

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

Prova själv →

<!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() ökar eller minskar ett elements bredd.

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

Exempel

div
{
   
transform: scaleX(2);
}

Prova själv →

<!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öljande exempel minskar <div>-elementet till hälften av dess ursprungliga bredd:

Exempel

div
{
   
transform: scaleX(0.5);
}

Prova själv →

<!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() ökar eller minskar höjden på ett element.

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

Exempel

div
{
   
transform: scaleY(3);
}

Prova själv →

<!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öljande exempel minskar <div>-elementet till hälften av dess original höjd:

Exempel

div
{
   
transform: scaleY(0.5);
}

Prova själv →

<!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() snedvrider ett element längs X-axeln med den givna vinkeln.

Följande exempel snedställer <div>-elementet 20 grader längs med X-axel:

Exempel

div
{
   
transform: skewX(20deg);
}

Prova själv →

<!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() snedställer ett element längs Y-axeln med den givna vinkeln.

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

Exempel

div
{
   
transform: skewY(20deg);
}

Prova själv →

<!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() snedställer ett element längs X- och Y-axeln med de givna vinklarna.

Följande exempel snedställer <div>-elementet 20 grader längs X-axeln och 10 grader längs Y-axeln:

Exempel

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

Prova själv →

<!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>


Om den andra parametern inte anges har den ett nollvärde. Så, följande exempel snedvrider <div>-elementet 20 grader längs X-axeln:

Exempel

div
{
   
transform: skew(20deg);
}

Prova själv →

<!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() kombinerar alla 2D-transformationsmetoder till en.

Matrix()-metoden tar sex parametrar, som innehåller matematiska funktioner, som låter dig rotera, skala, flytta (översätta) och snedställa element.

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

Exempel

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

Prova själv →

<!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-transformegenskaper

Följande tabell listar alla 2D-transformegenskaper:

transform

Tillämpar en 2D- eller 3D-transformation på ett element

transform-origin

Låter dig ändra positionen på transformerade element

CSS 2D-omvandlingsmetoder

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

Definierar en 2D-transformation med hjälp av en matris med sex värden

translate(x,y)

Definierar en 2D-översättning som flyttar elementet längs X- och Y-axeln

translateX(n)

Definierar en 2D-översättning som flyttar elementet längs X-axeln

translateY(n)

Definierar en 2D-översättning som flyttar elementet längs Y-axeln

scale(x,y)

Definierar en 2D-skalatransformation som ändrar elementens bredd och höjd

scaleX(n)

Definierar en 2D-skalatransformation som ändrar elementets bredd

scaleY(n)

Definierar en 2D-skalatransformation som ändrar elementets höjd

rotate(angle)

Definierar en 2D-rotation, vinkeln anges i parametern

skew(x-angle,y-angle)

Definierar en 2D-skev transformation längs X- och Y-axeln

skewX(angle)

Definierar en 2D-skev transformation längs X-axeln

skewY(angle)

Definierar en 2D-skev transformation längs Y-axeln