traduire vs transformer origine css3
Je me demandais si quelqu'un pouvait m'aider. J'ai eu de la difficulté à comprendre ce qui est exactement la propriété css3: transform-origin
. Je n'arrive pas à suivre la direction qu'il est en mouvement.
Ainsi, par exemple, disons que vous avez un carré div, et vous tournez à 40 degrés. et puis vous effectuez une transform-origin: 100% 0%
. ne pouvez-vous pas juste faire un translateX(and some value)
? Il semble que translateX va le déplacer le long de l'axe x à l'égard de la nouvelle rotation de l'axe après avoir effectué une rotation. Je n'arrive pas à suivre ce que transform-origin est en train de faire, ou ce qu'est exactement il est.
Façon claire et approfondie exemple serait très apprécié. =)
OriginalL'auteur Sasha | 2011-12-25
Vous devez vous connecter pour publier un commentaire.
transform-origin
changements du point où l'élément se transforme plutôt que de déplacer l'ensemble de l'élément (que de les traduire serait). La valeur par défaut esttransform-origin: 50% 50%;
.Voici une illustration: http://jsfiddle.net/joshnh/73g7t/
Pas de soucis du tout!
Ce lien ne semble pas fonctionner maintenant, mais ce n': jsfiddle.net/73g7t
Merci, lien mis à jour.
Dans l' ".wrapper div" définition contient le passage des valeurs et ces valeurs s'appliquent à toutes les cases(bleu,rouge et vert). Mais la transformation tourner dans ".wrapper div" ne s'applique pas pour les autres zones. Pour les autres boîtes de transformer la rotation est mentionnée séparément dans le "wrapper .traduire" et ".wrapper .transformer l'origine". Pourquoi est-ce?
OriginalL'auteur joshnh