CSS 3D Transforms

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

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

CSS 3D Transforms

Το CSS υποστηρίζει επίσης τρισδιάστατους μετασχηματισμούς.

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

2D rotate
3D rotate

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

  • transform

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

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

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 3D Transforms Methods

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

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

Η μέθοδος rotateX()

Η μέθοδος rotateX() περιστρέφει ένα στοιχείο γύρω από τον άξονα Χ σε δεδομένο βαθμό:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Η μέθοδος rotateY()

Η μέθοδος rotateY() περιστρέφει ένα στοιχείο γύρω από τον άξονα Υ σε δεδομένο βαθμό:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>

<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

Η μέθοδος rotateZ()

Η μέθοδος rotateZ() περιστρέφει ένα στοιχείο γύρω από τον άξονα Z σε δεδομένο βαθμό:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>

<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

Ιδιότητες μετασχηματισμού CSS

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

transform

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

transform-origin

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

transform-style

Καθορίζει τον τρόπο απόδοσης των ένθετων στοιχείων στον τρισδιάστατο χώρο

perspective

Καθορίζει την προοπτική για τον τρόπο προβολής των τρισδιάστατων στοιχείων

perspective-origin

Καθορίζει την κάτω θέση των τρισδιάστατων στοιχείων

backface-visibility

Καθορίζει εάν ένα στοιχείο πρέπει να είναι ορατό όταν δεν είναι στραμμένο στην οθόνη

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

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Ορίζει έναν τρισδιάστατο μετασχηματισμό, χρησιμοποιώντας έναν πίνακα 4x4 με 16 τιμές

translate3d(x,y,z)

Ορίζει μια τρισδιάστατη μετάφραση

translateX(x)

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

translateY(y)

Ορίζει μια τρισδιάστατη μετάφραση, χρησιμοποιώντας μόνο την τιμή για τον άξονα Υ

translateZ(z)

Ορίζει μια τρισδιάστατη μετάφραση, χρησιμοποιώντας μόνο την τιμή για τον άξονα Z

scale3d(x,y,z)

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

scaleX(x)

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

scaleY(y)

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

scaleZ(z)

Ορίζει έναν μετασχηματισμό κλίμακας 3D δίνοντας μια τιμή για τον άξονα Z

rotate3d(x,y,z,angle)

Ορίζει μια τρισδιάστατη περιστροφή

rotateX(angle)

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

rotateY(angle)

Ορίζει μια τρισδιάστατη περιστροφή κατά μήκος του άξονα Υ

rotateZ(angle)

Ορίζει μια τρισδιάστατη περιστροφή κατά μήκος του άξονα Z

perspective(n)

Καθορίζει μια προοπτική προβολή για ένα τρισδιάστατο μετασχηματισμένο στοιχείο