La propriété perspective-origin détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété perspective.

Syntaxe

/* Syntaxe avec une valeur */
perspective-origin: x-position;

/* Syntaxe avec deux valeurs */
perspective-origin: x-position y-position;

/* Lorsque x-position et y-position sont des mots-clés */
/* on peut aussi avoir la forme suivante valide        */
perspective-origin: y-position x-position;

/* Valeurs globales */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;

Valeurs

x-position
Indique l'abscisse de la position du point de fuite. La valeur peut être :
  • De type <length-percentage> : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.
  • left : un mot-clé qui est un alias pour indiquer une longueur nulle.
  • center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de 50%.
  • right : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.
y-position
Indique l'ordonnée de la position du point de fuite. La valeur peut être :
  • De type <length-percentage> : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.
  • De type <length> : la position est indiquée avec une valeur de longueur. La valeur peut être négative.
  • top : un mot-clé qui est un alias pour indiquer une longueur nulle.
  • center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de 50%.
  • bottom : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.

Syntaxe formelle

<position>


<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


<length-percentage> = <length> | <percentage>

Exemples

Cubes avec des valeurs communes pour perspective-origin

HTML

<table>
   <tbody>
      <tr>
         <th><code>perspective-origin: top left;</code>
         </th>
         <th><code>perspective-origin: top;</code>
         </th>
         <th><code>perspective-origin: top right;</code>
         </th>
      </tr>
      <tr>
         <td>
            <div class="container">
               <div class="cube potl">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube potm">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube potr">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <th><code>perspective-origin: left;</code>
         </th>
         <th><code>perspective-origin: 50% 50%;</code>
         </th>
         <th><code>perspective-origin: right;</code>
         </th>
      </tr>
      <tr>
         <td>
            <div class="container">
               <div class="cube poml">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube pomm">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube pomr">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <th><code>perspective-origin: bottom left;</code>
         </th>
         <th><code>perspective-origin: bottom;</code>
         </th>
         <th><code>perspective-origin: bottom right;</code>
         </th>
      </tr>
      <tr>
         <td>
            <div class="container">
               <div class="cube pobl">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube pobm">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
         <td>
            <div class="container">
               <div class="cube pobr">
                  <div class="face front">1</div>
                  <div class="face back">2</div>
                  <div class="face right">3</div>
                  <div class="face left">4</div>
                  <div class="face top">5</div>
                  <div class="face bottom">6</div>
               </div>
            </div>
         </td>
      </tr>
   </tbody>
</table>

CSS

/* On utilise des classes pour les valeurs de perspective-origin */
.potl {
    perspective-origin: top left;
    -webkit-perspective-origin: top left;
}
.potm {
    perspective-origin: top;
    -webkit-perspective-origin: top;
}
.potr {
    perspective-origin: top right;
    -webkit-perspective-origin: top right;
}
.poml {
    perspective-origin: left;
    -webkit-perspective-origin: left;
}
.pomm {
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
}
.pomr {
    perspective-origin: right;
    -webkit-perspective-origin: right;
}
.pobl {
    perspective-origin: bottom left;
    -webkit-perspective-origin: bottom left;
}
.pobm {
    perspective-origin: bottom;
    -webkit-perspective-origin: bottom;
}
.pobr {
    perspective-origin: bottom right;
    -webkit-perspective-origin: bottom right;
}

/* On définit le div container, celui pour le cube et une face générique */
 .container {
   width: 100px;
   height: 100px;
   margin: 24px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective: 300px;
   transform-style: preserve-3d;
   -webkit-backface-visibility: visible;
   -webkit-perspective: 300px;
   -webkit-transform-style: preserve-3d;
}
.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}

/* On définit chaque face en fonction de la direction */
 .front {
   background: rgba(0, 0, 0, 0.3);
   transform: translateZ(50px);
   -webkit-transform: translateZ(50px);
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
   -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
   -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
   -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
   background: rgba(196, 196, 0, 0.7);
   transform: rotateX(90deg) translateZ(50px);
   -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: rotateX(-90deg) translateZ(50px);
   -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* On améliore un peu le tableau */
th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
   text-align: left;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Transforms Level 2
La définition de 'perspective-origin' dans cette spécification.
Brouillon de l'éditeur Définition initiale.

Valeur initiale50% 50%
Applicabilitééléments transformables
Héritéenon
Pourcentagesse rapporte à la taille de la boîte de l'élément
Médiavisuel
Valeur calculéepour une valeur de type length sa valeur absolue, sinon un pourcentage
Type d'animationsimple list of length, percentage, or calc
Ordre canoniqueUne ou deux valeurs, avec la longueur en absolue et les mots-clés traduits en pourcentage

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple12 -webkit-

12

12 -webkit-

16

10 -moz-

49 -webkit-

45 -webkit- 1

1015 -webkit- Oui -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple3 -webkit- ?

Oui

Oui -webkit-

16

10 -moz-

49 -webkit-

45 -webkit- 1

Oui -webkit- Oui -webkit- ?

1. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,