CSS 2D transzformációk

Tartalomjegyzék

CSS 2D transzformációk

A CSS-átalakítások lehetővé teszik az elemek mozgatását, elforgatását, méretezését és elferdítését.

Vigye az egeret az alábbi elem fölé a 2D transzformáció megtekintéséhez:

2D rotate

Ebben a fejezetben a következő CSS-tulajdonságokat ismerheti meg:

transform

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót adják meg, amely teljes mértékben támogatja a tulajdonságot.

Property
transform	36.0	10.0	16.0	9.0	23.0

CSS 2D átalakítási módszerek

A CSS transform tulajdonságával a következő 2D átalakítási módszereket használhatja:

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

Tipp: A következő fejezetben megismerheti a 3D-s átalakításokat.

A `translate()` módszer

A translate() metódus elmozdít egy elemet az aktuális helyéről (a az X-tengelyhez és az Y-tengelyhez megadott paraméterekhez).

A következő példa a <div> elemet 50 képponttal jobbra mozgatja, és 100 képponttal lejjebb a jelenlegi helyzetéhez képest:

Példa

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

Próbálja ki Ön is →

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

A `rotate()` módszer

A rotate() metódus az elemet az óramutató járásával megegyező vagy azzal ellentétes irányba forgatja egy adott foknak megfelelően.

A következő példa elforgatja a <div> elemet az óramutató járásával megegyező irányba 20 fokkal:

Példa

div
{
  transform: rotate(20deg);
}

Próbálja ki Ön is →

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

A negatív értékek használata az elemet az óramutató járásával ellentétes irányba forgatja.

A következő példa a <div> elemet az óramutató járásával ellentétes irányba forgatja 20 fokkal:

Példa

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

Próbálja ki Ön is →

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

A `scale()` módszer

A scale() módszer növeli vagy csökkenti egy elem méretét (a szélességhez és magassághoz megadott paramétereknek megfelelően).

A következő példa a <div> elemet eredeti szélességének kétszeresére és eredeti magasságának háromszorosára növeli:

Példa

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

Próbálja ki Ön is →

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

A következő példa a <div> elemet az eredeti szélességének és magasságának felére csökkenti:

Példa

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

Próbálja ki Ön is →

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

A `scaleX()` módszer

A scaleX() metódus növeli vagy csökkenti a egy elem szélessége.

A következő példa a <div> elemet eredeti szélességének kétszeresére növeli:

Példa

div
{
   
transform: scaleX(2);
}

Próbálja ki Ön is →

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

A következő példa a <div> elemet az eredeti szélességének felére csökkenti:

Példa

div
{
   
transform: scaleX(0.5);
}

Próbálja ki Ön is →

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

A `scaleY()` módszer

A scaleY() metódus növeli vagy csökkenti a egy elem magassága.

A következő példa a <div> elemet az eredeti háromszorosára növeli magasság:

Példa

div
{
   
transform: scaleY(3);
}

Próbálja ki Ön is →

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

A következő példa a <div> elemet az eredeti felére csökkenti magasság:

Példa

div
{
   
transform: scaleY(0.5);
}

Próbálja ki Ön is →

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

A `skewX()` módszer

A skewX() metódus egy elemet az X tengely mentén a megadott szöggel elferdít.

A következő példa a <div> elemet 20 fokkal elferdíti a X-tengely:

Példa

div
{
   
transform: skewX(20deg);
}

Próbálja ki Ön is →

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

A `skewY()` módszer

A skewY() metódus egy elemet az Y tengely mentén a megadott szöggel elferdít.

A következő példa a <div> elemet 20 fokkal elferdíti az Y tengely mentén:

Példa

div
{
   
transform: skewY(20deg);
}

Próbálja ki Ön is →

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

A `skew()` módszer

A skew() metódus egy elemet az X és Y tengely mentén a megadott szögekkel elferdít.

A következő példa a <div> elemet 20 fokkal elferdíti az X tengely mentén, és 10 fokkal az Y tengely mentén:

Példa

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

Próbálja ki Ön is →

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

Ha a második paraméter nincs megadva, akkor annak nulla az értéke. Tehát a következő példa a <div> elemet 20 fokkal elferdíti az X tengely mentén:

Példa

div
{
   
transform: skew(20deg);
}

Próbálja ki Ön is →

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

A `mátrix()` módszer

A mátrix() metódus az összes 2D átalakítási metódust egybe egyesíti.

A mátrix() metódus hat paramétert vesz fel, amelyek matematikai függvényeket tartalmaznak, amely lehetővé teszi az elemek elforgatását, méretezését, mozgatását (fordítását) és elferdítését.

A paraméterek a következők: mátrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Példa

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

Próbálja ki Ön is →

<!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 átalakítás tulajdonságai

Az alábbi táblázat felsorolja az összes 2D átalakítási tulajdonságot:

transform: 2D vagy 3D transzformációt alkalmaz egy elemre
transform-origin: Lehetővé teszi az átalakított elemek pozíciójának megváltoztatását

CSS 2D transzformációs módszerek

matrix(n,n,n,n,n,n): 2D transzformációt határoz meg egy hat értékből álló mátrix használatával
translate(x,y): 2D fordítást határoz meg, mozgatva az elemet az X és az Y tengely mentén
translateX(n): 2D fordítást határoz meg, az elemet az X-tengely mentén mozgatva
translateY(n): 2D fordítást határoz meg, az elemet az Y tengely mentén mozgatva
scale(x,y): 2D léptékű transzformációt határoz meg, megváltoztatva az elemek szélességét és magasságát
scaleX(n): 2D léptékű transzformációt határoz meg, megváltoztatva az elem szélességét
scaleY(n): 2D léptékű transzformációt határoz meg, megváltoztatva az elem magasságát
rotate(angle): 2D elforgatást határoz meg, a szög a paraméterben van megadva
skew(x-angle,y-angle): 2D ferde transzformációt határoz meg az X és az Y tengely mentén
skewX(angle): 2D ferde transzformációt határoz meg az X tengely mentén
skewY(angle): 2D ferde transzformációt határoz meg az Y tengely mentén

CSS 2D transzformációk

Tartalomjegyzék