CSS3 transformer origine propriété
Exemples
Régler la position du point éléments rotatifs:
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* 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-origin (two-value syntax) |
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-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Définition des attributs et des instructions
transformée-Origin attribut vous permet de changer la position de l'élément de conversion.
éléments de conversion 2D peuvent modifier des éléments X et Y-axe. élément de conversion 3D, vous pouvez également modifier l'élément de l'axe Z.
Pour mieux comprendre l'attribut Transform-Origin, s'il vous plaît voir le démo .
Remarque: Cette propriété doit d' abord transformer la propriété.
Astuce: les utilisateurs de Safari / Chrome:Pour mieux comprendre la transformation 3D propriétés, s'il vous plaît voir la démo .
| Par défaut: | 50% 50% 0 |
|---|---|
| Héritage: | aucun |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet .style.transformOrigin = "20% 40%" |
grammaire
| valeur | description |
|---|---|
| abscisse | Vue personnalisée est placé là où l'axe-X. Valeurs possibles:
|
| l'axe y | Vue personnalisée est placé là où l'axe Y. Valeurs possibles:
|
| l'axe z | Vue personnalisée est placé là où l'axe-Z. Valeurs possibles:
|