perspective-origin

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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.

Valeur initiale	`50% 50%`
Applicabilité	éléments transformables
Héritée	non
Pourcentages	se rapporte à la taille de la boîte de l'élément
Média	visuel
Valeur calculée	pour une valeur de type `length` sa valeur absolue, sinon un pourcentage
Type d'animation	une simple liste de , une longueur, pourcentage ou calc() ;
Ordre canonique	Une ou deux valeurs, avec la longueur en absolue et les mots-clés traduits en pourcentage

Syntaxe

perspective-origin: x-position;              /* une valeur */
perspective-origin: x-position y-position;   /* deux valeurs */

/* 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>où 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
où 
<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 1 La définition de 'perspective-origin' dans cette spécification.	Version de travail	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	12-webkit	10 (10)-moz 16 (16)^[1]	10	15	(Oui)-webkit

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	3.0-webkit	10.0 (10)-moz 16.0 (16)^[1]	8.1	(Oui)-webkit	(Oui)-webkit

[1] En plus de la version non préfixée, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Utiliser les transformations CSS

perspective-origin

Syntaxe

Valeurs

Syntaxe formelle

Exemples

Cubes avec des valeurs communes pour perspective-origin

HTML

CSS

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Étiquettes et contributeurs liés au document

Cubes avec des valeurs communes pour `perspective-origin`