CSS 3D μετατροπές

CSS 3D μετατροπές

Το CSS υποστηρίζει επίσης τις μετατροπές 3D.

Παρακαλώ ανασηκώστε το ποντίκι σας πάνω στα παρακάτω στοιχεία για να δείτε τη διαφορά μεταξύ της μετατροπής 2D και 3D:

2D rotate
3D rotate

Σε αυτό το κεφάλαιο, θα μάθετε τα παρακάτω CSS attribute:

  • transform

Υποστήριξη browser

Οι αριθμοί στην τabelle δείχνουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως το attribute.

Αtribούτημα Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

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

μέσω CSS transform Ατрибούτημα, μπορείτε να χρησιμοποιήσετε τις παρακάτω μεθόδους μετατροπής 3D:

  • rotateX()
  • rotateY()
  • rotateZ()

Μέθοδος rotateX()

Περιστροφή Χ

rotateX() Μέθοδος που κάνει το στοιχείο να γυρίζει γύρω από τον άξονα X με μια δεδομένη γωνία:

Παράδειγμα

#myDiv {
  transform: rotateX(150deg);
}

Προσπαθήστε να το δοκιμάσετε

Μέθοδος rotateY()

Περιστροφή Υ

rotateY() Μέθοδος που κάνει το στοιχείο να γυρίζει γύρω από τον άξονα Y με μια δεδομένη γωνία:

Παράδειγμα

#myDiv {
  transform: rotateY(130deg);
}

Προσπαθήστε να το δοκιμάσετε

Μέθοδος rotateZ()

rotateZ() Μέθοδος που κάνει το στοιχείο να γυρίζει γύρω από τον άξονα Z με μια δεδομένη γωνία:

Παράδειγμα

#myDiv {
  transform: rotateZ(90deg);
}

Προσπαθήστε να το δοκιμάσετε

Ατрибούτημα μετατροπής CSS

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

Αtribούτημα Περιγραφή
transform Εφαρμόζει 2D ή 3D μετατροπές στο στοιχείο.
transform-origin Επιτρέπει τη μεταβολή της θέσης του στοιχείου που μετατρέπεται.
transform-style Ορίζει πώς τα στοιχεία που περιλαμβάνονται στο στοιχείο θα εμφανιστούν στον χώρο 3D.
perspective Ορίζει την απόσταση του στοιχείου 3D από την οπτική γραμμή.
perspective-origin Ορίζει τη θέση της βάσης του στοιχείου 3D.
backface-visibility Ορίζει αν το στοιχείο είναι ορατό όταν δεν είναι κατευθυνόμενο προς την οθόνη.

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

Συνάρτηση Περιγραφή
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Ορίζει τη μετατροπή μετακίνησης 3D, χρησιμοποιώντας μια 4x4 μatrice με 16 τιμές.
translate3d(x,y,z) Ορίζει τη μετατροπή μετακίνησης 3D.
translateX(x) Ορίζει τη μετατροπή μετακίνησης 3D, χρησιμοποιώντας μόνο τις τιμές του άξονα X.
translateY(y) Ορίζει τη μετατροπή μετακίνησης 3D, χρησιμοποιώντας μόνο τις τιμές του άξονα Y.
translateZ(z) Ορίζει τη μετατροπή μετακίνησης 3D, χρησιμοποιώντας μόνο τις τιμές του άξονα Z.
scale3d(x,y,z) Ορίζει τη μετατροπή κλίμακας 3D.
scaleX(x) Ορίζει τη μετατροπή κλίμακας 3D, μέσω της τιμής του άξονα X.
scaleY(y) Ορίζει τη μετατροπή κλίμακας 3D, μέσω της τιμής του άξονα Y.
scaleZ(z) Ορίζει τη μετατροπή κλίμακας 3D, μέσω της τιμής του άξονα Z.
rotate3d(x,y,z,angle) Ορισμός της ροήτας 3D.
rotateX(angle) Ορισμός της ροήτας 3D κατά μήκος του άξονα X.
rotateY(angle) Ορισμός της ροήτας 3D κατά μήκος του άξονα Y.
rotateZ(angle) Ορισμός της ροήτας 3D κατά μήκος του άξονα Z.
perspective(n) Ορισμός της οπτικής προβολής του στοιχείου μετατροπής 3D.