Kursrekommendation:

CSS perspective() funktion

Definition och användning perspective() CSS

perspective() Funktionen definierar användarens avstånd till z=0 planet. transform egenskapen.

Exempel

Använd perspective() Lägg till lite perspektiv till två kuber:

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

Prova själv

CSS syntax

perspective(length|none)
Värde Beskrivning
length Obligatorisk. Ange användarens avstånd till z=0 planet. none betyder ingen transformation.

Tekniska detaljer

Version: CSS Transforms Module Level 2

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder denna funktion.

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

Relaterade sidor

Lär dig:CSS 3D transformation

Referens:CSS transform egenskap

Referens:CSS rotate() funktion

Referens:CSS rotate3d() funktion

Referens:CSS rotateX() funktion

Referens:CSS rotateY() funktion

Referens:CSS rotateZ() funktion