Aanbevolen cursus:

CSS perspectief() functie

Definitie en gebruik perspectief() CSS

perspectief() De functie definieert de afstand van de gebruiker tot het z=0 vlak. transform in de eigenschappen van de property.

Voorbeeld

Gebruik perspectief() Voeg een beetje perspectief toe aan de twee kubussen:

.cube1 {
  lettergrootte: 4em;
  breedte: 2em;
  marge: 1.5em auto;
  transform-style: behoud-3d;
  transform: perspectief(5cm) rotateX(-15graden) rotateY(30graden);
}
.cube2 {
  lettergrootte: 4em;
  breedte: 2em;
  marge: 1.5em auto;
  transform-style: behoud-3d;
  transform: perspectief(10cm) rotateX(-15graden) rotateY(30graden);
}

Probeer het zelf

CSS syntaxis

perspectief(length|none)
Waarde Beschrijving
length Verplicht. Specificeer de afstand van de gebruiker tot het z=0 vlak. none betekent geen transformatie.

Technische details

Versie: CSS Transforms Module Level 2

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

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

Gerelateerde pagina's

Handleiding:CSS 3D transformatie

Referentie:CSS transform eigenschap

Referentie:CSS rotate() functie

Referentie:CSS rotate3d() functie

Referentie:CSS rotateX() functie

Referentie:CSS rotateY() functie

Referentie:CSS rotateZ() functie