CSS 2D Transforms

Sisällysluettelo

    Näytä sisällysluettelo

CSS 2D Transforms

CSS-muunnoksilla voit siirtää, kiertää, skaalata ja vinoittaa elementtejä.

Vie hiiri alla olevan elementin päälle nähdäksesi 2D-muunnos:

<script> var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } }
2D rotate

Tässä luvussa opit seuraavista CSS-ominaisuudesta:

transform

Selaimen tuki

Taulukon numerot määrittävät ensimmäisen selainversion, joka tukee täysin ominaisuutta.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 2D Transforms Methods

CSS-ominaisuuden muunnos avulla voit käyttää seuraavia 2D-muunnosmenetelmiä:

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

Vinkki: Opit 3D-muunnoksista seuraavassa luvussa.

translate()-menetelmä

Translate

Menetelmä translate() siirtää elementin sen nykyisestä sijainnista (mukaan X-akselille ja Y-akselille annettuihin parametreihin).

Seuraava esimerkki siirtää <div>-elementtiä 50 pikseliä oikealle, ja 100 pikseliä alaspäin nykyisestä sijainnistaan:

Esimerkki

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

Kokeile itse →

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

rotate()-menetelmä

Metodi rotate() kiertää elementtiä myötä- tai vastapäivään tietyn asteen mukaan.

Seuraava esimerkki kiertää <div>-elementtiä myötäpäivään 20 astetta:

Esimerkki

div
{
  transform: rotate(20deg);
}

Kokeile itse →

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

Negatiivisten arvojen käyttäminen pyörittää elementtiä vastapäivään.

Seuraava esimerkki kiertää <div>-elementtiä vastapäivään 20 astetta:

Esimerkki

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

Kokeile itse →

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

scale()-menetelmä

Scale

scale()-menetelmä suurentaa tai pienentää elementin kokoa (leveydelle ja korkeudelle annettujen parametrien mukaan).

Seuraava esimerkki suurentaa <div>-elementin kaksinkertaiseksi sen alkuperäiseen leveyteen verrattuna ja kolminkertaiseksi alkuperäiseen korkeuteen verrattuna:

Esimerkki

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

Kokeile itse →

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

Seuraava esimerkki pienentää <div>-elementin puoleen sen alkuperäisestä leveydestä ja korkeudesta:

Esimerkki

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

Kokeile itse →

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

scaleX()-menetelmä

Metodi scaleX() lisää tai pienentää elementin leveys.

Seuraava esimerkki suurentaa <div>-elementin kaksinkertaiseksi sen alkuperäiseen leveyteen verrattuna:

Esimerkki

div
{
   
transform: scaleX(2);
}

Kokeile itse →

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

Seuraava esimerkki pienentää <div>-elementin puoleen sen alkuperäisestä leveydestä:

Esimerkki

div
{
   
transform: scaleX(0.5);
}

Kokeile itse →

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

scaleY()-menetelmä

Metodi scaleY() lisää tai pienentää elementin korkeus.

Seuraava esimerkki suurentaa <div>-elementin kolminkertaiseksi alkuperäiseen verrattuna korkeus:

Esimerkki

div
{
   
transform: scaleY(3);
}

Kokeile itse →

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

Seuraava esimerkki pienentää <div>-elementin puoleen alkuperäisestä korkeus:

Esimerkki

div
{
   
transform: scaleY(0.5);
}

Kokeile itse →

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

skewX()-menetelmä

Metodi skewX() vinouttaa elementtiä X-akselia pitkin annetun kulman verran.

Seuraava esimerkki vinouttaa <div>-elementtiä 20 astetta pitkin X-akseli:

Esimerkki

div
{
   
transform: skewX(20deg);
}

Kokeile itse →

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

skewY()-menetelmä

Menetelmä skewY() vinouttaa elementin Y-akselia pitkin annetun kulman verran.

Seuraava esimerkki vinouttaa <div>-elementtiä 20 astetta Y-akselia pitkin:

Esimerkki

div
{
   
transform: skewY(20deg);
}

Kokeile itse →

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

skew()-menetelmä

skew()-menetelmä vinouttaa elementtiä X- ja Y-akselia pitkin annetuilla kulmilla.

Seuraava esimerkki vinouttaa <div>-elementtiä 20 astetta X-akselia pitkin ja 10 astetta Y-akselia pitkin:

Esimerkki

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

Kokeile itse →

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

Jos toista parametria ei ole määritetty, sen arvo on nolla. Joten seuraava esimerkki vinouttaa <div>-elementtiä 20 astetta X-akselia pitkin:

Esimerkki

div
{
   
transform: skew(20deg);
}

Kokeile itse →

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

matriisi()-menetelmä

matriisi()-menetelmä yhdistää kaikki 2D-muunnosmenetelmät yhdeksi.

Matriisi()-menetelmä ottaa kuusi parametria, jotka sisältävät matemaattisia funktioita, jonka avulla voit kiertää, skaalata, siirtää (kääntää) ja vinottaa elementtejä.

Parametrit ovat seuraavat: matriisi(scaleX(), vinoY(), vinoX(), scaleY(), translateX(), translateY())

Esimerkki

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

Kokeile itse →

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

Seuraavassa taulukossa on lueteltu kaikki 2D-muunnosominaisuudet:

transform

Käyttää 2D- tai 3D-muunnoksia elementtiin

transform-origin

Voit muuttaa muunnettujen elementtien sijaintia

CSS 2D -muunnosmenetelmät

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

Määrittää 2D-muunnoksen kuuden arvon matriisin avulla

translate(x,y)

Määrittää 2D-käännöksen siirtämällä elementtiä X- ja Y-akselia pitkin

translateX(n)

Määrittää 2D-käännöksen siirtämällä elementtiä X-akselia pitkin

translateY(n)

Määrittää 2D-käännöksen siirtämällä elementtiä Y-akselia pitkin

scale(x,y)

Määrittää 2D-mittakaavan muunnoksen, joka muuttaa elementtien leveyttä ja korkeutta

scaleX(n)

Määrittää 2D-mittakaavan muunnoksen, joka muuttaa elementin leveyttä

scaleY(n)

Määrittää 2D-mittakaavan muunnoksen, joka muuttaa elementin korkeutta

rotate(angle)

Määrittää 2D-kierron, kulma on määritetty parametrissa

skew(x-angle,y-angle)

Määrittää 2D vinomuunnoksen X- ja Y-akselia pitkin

skewX(angle)

Määrittää 2D vinomuunnoksen X-akselia pitkin

skewY(angle)

Määrittää 2D vinomuunnoksen Y-akselia pitkin