manuel de référence CSS

règles CSS @

大全 des attributs CSS

Attribut position CSS CSS3 Attribut perspective

CSS3 perspective-Méthode d'utilisation et exemple de l'attribut origin

perspective-Définition de l'attribut origin 3L'axe X et Y sur lesquels s'appuie l'élément D. Cet attribut vous permet de modifier 3La position inférieure de l'élément D. Définir la perspective-L'attribut origin, qui est un sous-élément de l'élément, la perspective, plutôt que l'élément lui-même.

Le tableau suivant décrit l'utilisation et l'historique des versions de cet attribut, ainsi que la syntaxe d'utilisation de cet attribut dans les scripts JavaScript.

Valeur par défaut :	50P%
Appliqué à :	Élément moulable
Héritage :	aucun
Animable :	est.Veuillez consulter Attributs d'animation.
Version :	CSS3nouvelle fonction
Grammaire JavaScript :	object.style.perspectiveOrigin="20%"

Perspective-La syntaxe d'utilisation de origin

La syntaxe de cet attribut est la suivante :

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

Attention :si seul perspective est utilisé-l'attribut origin spécifie une valeur, alors la deuxième valeur est supposée être au centre, égale à50% de la valeur.

L'exemple suivant montre comment utiliser perspective-de l'attribut origin.

Exemple

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

Vérifiez en cliquant ici‹/›

Attention :Si au moins l'une des deux valeurs n'est pas un mot-clé, la première valeur représente la position horizontale de l'origine de la perspective (ou le décalage), et la deuxième valeur représente la position verticale de l'origine de la perspective (ou le décalage).

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
x-axis	représente la position horizontale de l'origine de la perspective (ou le décalage). Il peut avoir l'une des valeurs suivantes : percentage -Définit le décalage par rapport à la largeur de l'élément. length -Définit le décalage de la valeur de longueur utilisée. left -égal à 0% ou à zéro largeur. center -égal à la largeur de la boîte50% ou la moitié. right -égal à100% ou toute la largeur de la boîte.
y-axis	représente la position verticale de l'origine de la perspective (ou le décalage). Il peut avoir l'une des valeurs suivantes : percentage -Définit le décalage par rapport à la hauteur de l'élément. length -Définit le décalage de la valeur de longueur utilisée. top -égal à 0% ou à zéro hauteur. center -égal à la hauteur de la boîte50% ou la moitié. bottom -égal à100% ou toute la hauteur de la boîte.
initial	Définir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la perspective de son élément parent-Valeur de l'attribut origin.

Compatibilité du navigateur

perspective-La compatibilité du navigateur de l'attribut origin, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox 10+ ^-moz-,16 + Google Chrome 12+ ^-webkit-,36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-,23+

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3 3Transformation D.

Autres attributs associés :perspective,backface-visibility,transform,transform-origin,transform-style.

Attribut position CSS CSS3 Attribut perspective