CSS μεταμορφώσεις 2D

CSS μεταμορφώσεις 2D

Πρόγραμμα σπουδών:

CSS μετατροπές (transforms) επιτρέπουν τη μετακίνηση, την περιστροφή, τη ρύθμιση μεγέθους και την απόκλίνηση των στοιχείων.

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

2D rotate

  • transform

Σε αυτή την ενότητα, θα μάθετε τις παρακάτω ιδιότητες του CSS:

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

Αξία Οι αριθμοί στη τάβλη περιγράφουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα. Chrome IE Firefox Safari
transform Opera 36.0 10.0 16.0 9.0

Μέθοδοι 2D μετατροπής CSS

23.0 transform Με τη χρήση του CSS

  • Μέθοδος translate()
  • Μέθοδος rotate()
  • scaleX()
  • Μέθοδος scaleY()
  • Μέθοδος scale()
  • Μέθοδος skewX()
  • Μέθοδος skewY()
  • skew()
  • matrix()

Παράμετρος, μπορείτε να χρησιμοποιήσετε τις παρακάτω μεθόδους 2D μετατροπών:Συμβουλή:

Προσεχώς θα μάθετε τις 3D μετατροπές.

Translate

Μέθοδος translate() translate()

Μέθοδος μετακίνησης του στοιχείου από την αρχική του θέση (κατά βάση των παραμέτρων X και Y).

Παράδειγμα

div {
  Η παρακάτω παράδειγμα μετακινεί το στοιχείο <div> 50 pixel δεξιά και 100 pixel κάτω από την αρχική του θέση:
}

Προσπαθήστε το προσωπικά

transform: translate(50px, 100px);

Rotate

Μέθοδος rotate() rotate()

Μέθοδος γύρισμα του στοιχείου κατά δεξιά ή κατά αριστερά με βάση το δοθέντα γωνία.

Παράδειγμα

div {
  Η παρακάτω παράδειγμα γυρίζει το στοιχείο <div> κατά 20 μοίρες προς τα δεξιά:
}

Προσπαθήστε το προσωπικά

transform: rotate(20deg);

Χρήση αρνητικής τιμής για την ανάποδη γύρισμα του στοιχείου.

Παράδειγμα

div {
  Η παρακάτω παράδειγμα γυρίζει το στοιχείο <div> κατά 20 μοίρες προς τα αριστερά:
}

Προσπαθήστε το προσωπικά

transform: rotate(-20deg);

Scale

Μέθοδος scale() scale()

Μέθοδος προσθήκης ή μείωσης του μεγέθους του στοιχείου (κατά βάση των δοθέντων παραμέτρων πλάτους και ύψους).

Παράδειγμα

div {
  Η παρακάτω παράδειγμα διπλασιάζει το πλάτος του στοιχείου <div> στο διπλό της αρχικής του διάστασης και το ύψος του στο τριπλό της αρχικής του διάστασης:
}

Προσπαθήστε το προσωπικά

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Μέθοδος scaleX()

scaleX() Μέθοδος προσθήκης ή μείωσης του πλάτους του στοιχείου.

Η παρακάτω παράδειγμα διπλασιάζει το πλάτος του στοιχείου <div> στο διπλό της αρχικής του διάστασης:

Παράδειγμα

div {
  transform: scaleX(2);
}

Προσπαθήστε το προσωπικά

Η παρακάτω παράδειγμα μειώνει το πλάτος του στοιχείου <div> στο μισό της αρχικής του διάστασης:

Παράδειγμα

div {
  transform: scaleX(0.5);
}

Προσπαθήστε το προσωπικά

Μέθοδος scaleY()

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

Το παρακάτω παράδειγμα διπλασιάζει το στοιχείο <div> στο τριπλό της αρχικής του ύψους:

Παράδειγμα

div {
  transform: scaleY(3);
}

Προσπαθήστε το προσωπικά

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

Παράδειγμα

div {
  transform: scaleY(0.5);
}

Προσπαθήστε το προσωπικά

Μέθοδος skewX()

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

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

Παράδειγμα

div {
  transform: skewX(20deg);
}

Προσπαθήστε το προσωπικά

Μέθοδος skewY()

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

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

Παράδειγμα

div {
  transform: skewY(20deg);
}

Προσπαθήστε το προσωπικά

Μέθοδος skew()

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

Το παρακάτω παράδειγμα κάνει το στοιχείο <div> να στρέφεται κατά 20 βαθμούς κατά μήκος του άξονα X και κατά 10 βαθμούς κατά μήκος του άξονα Y:

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Αν δεν καθοριστεί ο δεύτερος παράμετρος, η τιμή είναι μηδέν. Επομένως, το παρακάτω παράδειγμα κάνει το στοιχείο <div> να στρέφεται κατά 20 βαθμούς κατά μήκος του άξονα X:

Παράδειγμα

div {
  transform: skew(20deg);
}

Προσπαθήστε το προσωπικά

Μέθοδος matrix()

Rotate

matrix() Η μέθοδος συνοψίζει όλες τις μεθόδους μετατροπής 2D.

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

Τα παρακάτω είναι οι παραμέτρους: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Παράδειγμα

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

Προσπαθήστε το προσωπικά

Αξίες μετατροπής CSS

Η παρακάτω τаблицή περιλαμβάνει όλες τις αξίες μετατροπής 2D:

Αξία Περιγραφή
transform Εφαρμογή 2D ή 3D μετατροπής στο στοιχείο.
transform-origin Επιτρέπει την αλλαγή της θέσης του μετατρεπόμενου στοιχείου.

Μέθοδοι 2D μετατροπής CSS

Λειτουργία Περιγραφή
matrix(n,n,n,n,n,n) Ορισμός 2D μετατροπής, χρήση πλέγματος με έξι τιμές.
translate(x,y) Ορισμός 2D μετατροπής, μετακίνηση στοιχείου κατά μήκος των άξονων X και Y.
translateX(n) Ορισμός 2D μετατροπής, μετακίνηση στοιχείου κατά μήκος του άξονα X.
translateY(n) Ορισμός 2D μετατροπής, μετακίνηση στοιχείου κατά μήκος του άξονα Y.
scale(x,y) Ορισμός μεταμόρφωσης κλίμακας 2D, αλλάζει το πλάτος και το ύψος του στοιχείου.
scaleX(n) Ορισμός μεταμόρφωσης κλίμακας 2D, αλλάζει το πλάτος του στοιχείου.
scaleY(n) Ορισμός μεταμόρφωσης κλίμακας 2D, αλλάζει το ύψος του στοιχείου.
rotate(γωνία) Ορισμός ροπής 2D, καθορίζοντας το γωνία.
skew(γωνία-x,γωνία-y) Ορισμός μεταμόρφωσης ροπής 2D, κατά μήκος των άξονων X και Y.
skewX(γωνία) Ορισμός μεταμόρφωσης ροπής 2D, κατά μήκος του άξονα X.
skewY(γωνία) Ορισμός μεταμόρφωσης ροπής 2D, κατά μήκος του άξονα Y.