Qu'est-ce que CSS3 propriété transform?

CSS Manuel de référence
CSS propriété

Le meilleur didacticiel CSS3 propriété transform en 2024, dans ce didacticiel, vous pouvez apprendre Exemples,support du navigateur,Définition des attributs et des instructions,grammaire,D'autres exemples,

CSS3 propriété transform

attribut top CSS: Précédent

Suivant: CSS3 transformer origine propriété

Exemples

Rotation élément div:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

Essayez »

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.

属性
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	12.0	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-

Définition des attributs et des instructions

2D Transformer la propriété est appliquée à l'élément ou de la conversion 3D. Cette propriété vous permet d'éléments tournent, zoom, déplacement, inclinaison, et ainsi de suite.

Pour mieux comprendre les propriétés de transformation, voir l'instance en ligne .

Par défaut:	aucun
Héritage:	aucun
Version:	CSS3
Syntaxe JavaScript:	objet .style.transform = "rotate (7deg)"

grammaire

transform:none | transformation-fonctions;

valeur	description
aucun	Définition ne convertit pas.
lamatrice (n, n, n,n, n, n)	Définir la conversion 2D, en utilisant une matrice de six valeurs.
matrix3d (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n)	conversion 3D définie en utilisant 16 valeurs matrice 4x4.
traduire(x, y)	Définir la conversion 2D.
translate3d(x, y, z)	Définir la conversion 3D.
translateX(x)	Définition de la conversion, mais avec la valeur de l'axe des abscisses.
translateY(y)	Définition de la conversion, mais la valeur de l'axe des ordonnées.
translateZ(z)	Définir la conversion 3D, mais avec la valeur de l'axe Z.
échelle (x [, y]?)	Définir 2D transformation d'échelle.
Scale3D(x, y, z)	Définir la transformation 3D à grande échelle.
scaleX(x)	En définissant la valeur de l'axe X pour définir la transformation d'échelle.
scaleY(y)	En définissant la valeur de l'axe Y pour définir la transformation d'échelle.
scaleZ(z)	Définir la transformation d'échelle 3D en réglant la valeur de l'axe des Z.
rotate(angle)	Définir 2D en rotation d'un angle prédéterminé dans l'argument.
Rotate3D (x, y, z,angle)	Définir la rotation 3D.
rotateX(angle)	3D X est défini le long de l'arbre.
rotateY(angle)	3D axe Y est défini le long de la rotation.
rotateZ(angle)	l'axe Z-3D est définie le long de la rotation.
skew (x-angle, y-angle)	Défini le long de la 2D X et Y-axe transformation skew.
skewX(angle)	2D axe X est défini le long de l'inclinaison de la conversion.
skewY(angle)	Défini le long du axe Y transformation skew 2D.
perspective(n)	élément de conversion 3D pour définir une vue en perspective.

D'autres exemples

Faire pivoter une image
Cet exemple montre comment créer une des photos "polaroid" et faire pivoter les images.

attribut top CSS: Précédent

Suivant: CSS3 transformer origine propriété

CSS Manuel de référence

CSS propriété