CSS3 propriété transform
Exemples
Rotation élément 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
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.