Fonction perspective() CSS

Définition et utilisation

CSS perspective() Définit la distance de l'utilisateur par rapport au plan z=0.

perspective() La fonction transform dans les attributs.

Exemple

Utilisez perspective() Ajouter un effet de perspective aux deux cubes :

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

Essayez-le vous-même

Syntaxe CSS

perspective(length|none)
Valeur Description
length Obligatoire. Définir la distance de l'utilisateur par rapport au plan z=0. none signifie pas de transformation.

Détails techniques

Version : Module de Transforms CSS Level 2

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette fonction.

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

Pages associées

Tutoriel :Transformation 3D CSS

Référence :Attribut transform CSS

Référence :Fonction rotate() CSS

Référence :Fonction rotate3d() CSS

Référence :Fonction rotateX() CSS

Référence :Fonction rotateY() CSS

Référence :Fonction rotateZ() CSS