Συνάρτηση perspective() CSS

Ορισμός και χρήση

CSS perspective() ορίζει την απόσταση του χρήστη από το επίπεδο z=0.

perspective() Η συνάρτηση transform στο περιβάλλον χρήστη της ιδιότητας.

Παράδειγμα

Χρησιμοποιώντας perspective() Προσθέστε κάποιες προοπτικές μεταμορφώσεις στους δύο κύβους:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

perspective(length|none)
Αξία Περιγραφή
length Απαιτείται. Καθορίζει την απόσταση του χρήστη από το επίπεδο z=0. none σημαίνει ότι δεν γίνεται μεταμόρφωση.

Τεχνικά λεπτομέρειες

Έκδοση: CSS Transforms Module Level 2

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

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

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Σχετικές σελίδες

Εκμάθηση:CSS 3D μεταμορφώσεις

Reference:CSS transform attribute

Reference:CSS στροφή() συνάρτηση

Reference:CSS στροφή3d() συνάρτηση

Reference:CSS στροφήX() συνάρτηση

Reference:CSS rotateY() function

Reference:CSS rotateZ() function