CSS3 propriété transform
Exemples
Rotation élément div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
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.