Kursusanbefaling:

CSS perspective() funktion

Definition og brug perspective() CSS

perspective() Funktion definerer brugerens afstand til z=0 plan. transform egenskab i

Eksempel

Brug perspective() Tilføj lidt perspektiv til to 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);
}

Prøv det selv

CSS syntaks

perspective(length|none)
Værdi Beskrivelse
length Obligatorisk. Angiver brugerens afstand til z=0 plan. none betyder ingen transformation.

Tekniske detaljer

Version: CSS Transforms Module Level 2

Browserunderstøttelse

Tabelens tal viser den første browserversion, der fuldt ud understøtter funktionen.

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

Relaterede sider

Læringsguide:CSS 3D transformation

Referencer:CSS transform egenskab

Referencer:CSS rotate() funktion

Referencer:CSS rotate3d() funktion

Referencer:CSS rotateX() funktion

Referencer:CSS rotateY() funktion

Referencer:CSS rotateZ() funktion