manuel de référence CSS

règles CSS @

大全 CSS propriétés

CSS3 transform-style propriété CSS3 transform propriété

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

transform-L'attribut 'origin' permet de modifier la position de l'élément de conversion.

2L'élément de conversion D peut modifier les axes X et Y de l'élément. 3L'élément de conversion D peut également modifier l'axe Z de l'élément.　

Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe d'utilisation de cette propriété dans le script JavaScript.

Valeur par défaut :	50% 50% 0
Appliqué à :	Élément transformable
Héritage :	non
Animable :	est.Veuillez consulter Propriété d'animation。
Version :	CSS3nouvelle fonction
La syntaxe JavaScript :	object.style.transformOrigin="20@%"

transform-La syntaxe d'utilisation d'origin

La syntaxe de cet attribut est la suivante :

transform-origin: x-position | y-position | z-position | initial | inherit

Attention :si ce n'est que pour 'transform'-L'attribut 'origin' spécifie une valeur, l'attribut suivant est supposé être 'center', qui équivaut à50% de la valeur.

Les exemples suivants montrent comment utiliser transform-attribut origin.

Exemple

img　{
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-transform:　rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform:　rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform:　rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform:　rotate(30deg);
　　　　transform-origin:　25% bottom;
}

Testez pour voir‹/›

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

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

valeur	description
x-position	représente la position horizontale de l'origine de la transformation (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 l'utilisation de la valeur de longueur. 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-position	représente la position verticale de l'origine de la transformation (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 l'utilisation de la valeur de longueur. 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.
z-position	unlengthValeur, elle décrit la distance de l'origine Z = 0 (pour3D transformation）。Pourcentage invalide.
initial	Rétablir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise le transform de son élément parent-Valeur de l'attribut origin.

Compatibilité du navigateur

transform-Compatibilité du navigateur pour l'attribut origin, les numéros dans le tableau suivant indiquent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3 2D transformation，CSS3 3D transformation

Propriétés associées :backface-visibility，perspective，perspective-origin，transform，transform-style。

CSS3 transform-style propriété CSS3 transform propriété