CSS 2D Transforms

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

CSS 2D Transforms

Οι μετασχηματισμοί CSS σάς επιτρέπουν να μετακινείτε, να περιστρέφετε, να κλιμακώνετε και να παραμορφώνετε στοιχεία.

Περάστε το ποντίκι πάνω από το παρακάτω στοιχείο για να δείτε έναν 2D μετασχηματισμό:

2D rotate

Σε αυτό το κεφάλαιο θα μάθετε για την ακόλουθη ιδιότητα CSS:

transform

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 2D Transforms Methods

Με την ιδιότητα CSS transform μπορείτε να χρησιμοποιήσετε τις ακόλουθες μεθόδους μετασχηματισμού 2D:

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

Συμβουλή: Θα μάθετε για τους τρισδιάστατους μετασχηματισμούς στο επόμενο κεφάλαιο.

Η μέθοδος translate()

Translate

Η μέθοδος translate() μετακινεί ένα στοιχείο από την τρέχουσα θέση του (σύμφωνα με στις παραμέτρους που δίνονται για τον άξονα Χ και τον άξονα Υ).

Το ακόλουθο παράδειγμα μετακινεί το στοιχείο <div> 50 pixel προς τα δεξιά, και 100 pixels κάτω από την τρέχουσα θέση του:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος rotate() περιστρέφει ένα στοιχείο δεξιόστροφα ή αριστερόστροφα σύμφωνα με έναν δεδομένο βαθμό.

Το ακόλουθο παράδειγμα περιστρέφει το στοιχείο <div> δεξιόστροφα κατά 20 μοίρες:

Παράδειγμα

div
{
  transform: rotate(20deg);
}

Δοκιμάστε το μόνοι σας →

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

Η χρήση αρνητικών τιμών θα περιστρέψει το στοιχείο αριστερόστροφα.

Το ακόλουθο παράδειγμα περιστρέφει το στοιχείο <div> αριστερόστροφα κατά 20 μοίρες:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Scale

Η μέθοδος scale() αυξάνει ή μειώνει το μέγεθος ενός στοιχείου (σύμφωνα με τις παραμέτρους που δίνονται για το πλάτος και το ύψος).

Το ακόλουθο παράδειγμα αυξάνει το στοιχείο <div> ώστε να είναι δύο φορές το αρχικό του πλάτος και τρεις φορές το αρχικό του ύψος:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Το ακόλουθο παράδειγμα μειώνει το στοιχείο <div> στο μισό του αρχικού του πλάτους και ύψους:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος scaleX() αυξάνει ή μειώνει το πλάτος ενός στοιχείου.

Το ακόλουθο παράδειγμα αυξάνει το στοιχείο <div> δύο φορές από το αρχικό του πλάτος:

Παράδειγμα

div
{
   
transform: scaleX(2);
}

Δοκιμάστε το μόνοι σας →

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

Το ακόλουθο παράδειγμα μειώνει το στοιχείο <div> στο μισό του αρχικού του πλάτους:

Παράδειγμα

div
{
   
transform: scaleX(0.5);
}

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος scaleY() αυξάνει ή μειώνει το ύψος ενός στοιχείου.

Το παρακάτω παράδειγμα αυξάνει το στοιχείο <div> σε τρεις φορές το αρχικό του ύψος:

Παράδειγμα

div
{
   
transform: scaleY(3);
}

Δοκιμάστε το μόνοι σας →

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

Το ακόλουθο παράδειγμα μειώνει το στοιχείο <div> στο μισό του αρχικού του ύψος:

Παράδειγμα

div
{
   
transform: scaleY(0.5);
}

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος skewX() παραμορφώνει ένα στοιχείο κατά μήκος του άξονα Χ κατά τη δεδομένη γωνία.

Το παρακάτω παράδειγμα παραμορφώνει το στοιχείο <div> κατά 20 μοίρες κατά μήκος του Άξονας Χ:

Παράδειγμα

div
{
   
transform: skewX(20deg);
}

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος skewY() παραμορφώνει ένα στοιχείο κατά μήκος του άξονα Υ κατά τη δεδομένη γωνία.

Το ακόλουθο παράδειγμα παραμορφώνει το στοιχείο <div> κατά 20 μοίρες κατά μήκος του άξονα Υ:

Παράδειγμα

div
{
   
transform: skewY(20deg);
}

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος skew() παραμορφώνει ένα στοιχείο κατά μήκος του άξονα X και Y από τις δεδομένες γωνίες.

Το ακόλουθο παράδειγμα παραμορφώνει το στοιχείο <div> 20 μοίρες κατά μήκος του άξονα Χ και 10 μοίρες κατά μήκος του άξονα Υ:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Εάν η δεύτερη παράμετρος δεν έχει καθοριστεί, έχει μηδενική τιμή. Έτσι, το ακόλουθο παράδειγμα παραμορφώνει το στοιχείο <div> κατά 20 μοίρες κατά μήκος του άξονα Χ:

Παράδειγμα

div
{
   
transform: skew(20deg);
}

Δοκιμάστε το μόνοι σας →

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

Η μέθοδος matrix()

Η μέθοδος matrix() συνδυάζει όλες τις μεθόδους 2D μετασχηματισμού σε μία.

Η μέθοδος matrix() παίρνει έξι παραμέτρους, που περιέχουν μαθηματικές συναρτήσεις, που σας επιτρέπει να περιστρέφετε, να κλιμακώνετε, να μετακινείτε (μεταφράζετε) και να λοξώνετε στοιχεία.

Οι παράμετροι είναι οι εξής: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Ο παρακάτω πίνακας παραθέτει όλες τις ιδιότητες του 2D μετασχηματισμού:

transform

Εφαρμόζει έναν 2D ή 3D μετασχηματισμό σε ένα στοιχείο

transform-origin

Σας επιτρέπει να αλλάξετε τη θέση στα μετασχηματισμένα στοιχεία

Μέθοδοι μετασχηματισμού CSS 2D

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

Ορίζει έναν 2D μετασχηματισμό, χρησιμοποιώντας έναν πίνακα έξι τιμών

translate(x,y)

Ορίζει μια μετάφραση 2D, μετακινώντας το στοιχείο κατά μήκος του άξονα X και του άξονα Y

translateX(n)

Ορίζει μια δισδιάστατη μετάφραση, μετακινώντας το στοιχείο κατά μήκος του άξονα Χ

translateY(n)

Καθορίζει μια μετάφραση 2D, μετακινώντας το στοιχείο κατά μήκος του άξονα Υ

scale(x,y)

Καθορίζει έναν μετασχηματισμό κλίμακας 2D, αλλάζοντας το πλάτος και το ύψος των στοιχείων

scaleX(n)

Καθορίζει έναν μετασχηματισμό κλίμακας 2D, αλλάζοντας το πλάτος του στοιχείου

scaleY(n)

Καθορίζει έναν μετασχηματισμό κλίμακας 2D, αλλάζοντας το ύψος του στοιχείου

rotate(angle)

Ορίζει μια 2D περιστροφή, η γωνία καθορίζεται στην παράμετρο

skew(x-angle,y-angle)

Ορίζει έναν δισδιάστατο λοξό μετασχηματισμό κατά μήκος του άξονα Χ και του άξονα Υ

skewX(angle)

Ορίζει έναν δισδιάστατο λοξό μετασχηματισμό κατά μήκος του άξονα Χ

skewY(angle)

Ορίζει έναν δισδιάστατο λοξό μετασχηματισμό κατά μήκος του άξονα Υ