Funkcja CSS perspective()

Definicja i użycie

CSS perspective() Definiuje odległość użytkownika od płaszczyzny z=0.

perspective() Funkcja transform w właściwościach.

Przykład

Używaj perspective() Dodaj trochę perspektywy do dwóch sześcianów:

.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);
}

Spróbuj sam

Gramatyka CSS

perspective(length|none)
Wartość Opis
length Wymagane. Określa odległość użytkownika od płaszczyzny z=0. none oznacza, że nie ma变换.

Szczegóły techniczne

Wersja: CSS Transforms Module Level 2

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

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

Strony związane

Tutorial:3D transformacja CSS

Wskazówki:Atrybut transform w CSS

Wskazówki:Funkcja CSS rotate()

Wskazówki:Funkcja CSS rotate3d()

Wskazówki:Funkcja CSS rotateX()

Wskazówki:Funkcja rotateY() w CSS

Wskazówki:Funkcja rotateZ() w CSS