web-dev-qa-db-fra.com

Faire pivoter et traduire

J'ai des problèmes de rotation et de positionnement d'une ligne de texte. Maintenant, c'est juste la position qui fonctionne. La rotation fonctionne également, mais seulement si je désactive le positionnement.

CSS:

#rotatedtext {
    transform-Origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

Le HTML est juste du texte brut.

csscss3webkittransformcss-transforms
72
Sera

La raison en est que vous utilisez deux fois la propriété de transformation. En raison des règles CSS avec la cascade, la dernière déclaration gagne si elles ont la même spécificité. Comme les deux déclarations de transformation se trouvent dans le même jeu de règles, c'est le cas.

Ce qu'il fait est ceci:

  1. faites pivoter le texte de 90 degrés. D'accord.
  2. traduire 50% par 50%. Ok, c’est la même propriété que la première étape, alors faites cette étape et ignorez l’étape 1.

Voir http://jsfiddle.net/Lx76Y/ et ouvrez-le dans le débogueur pour voir la première déclaration écrasée

Comme la traduction remplace la rotation, vous devez les combiner dans la même déclaration: http://jsfiddle.net/Lx76Y/1/

Pour ce faire, vous utilisez une liste de transformations séparées par des espaces:

#rotatedtext {
    transform-Origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Rappelez-vous qu'ils sont spécifiés dans une chaîne, donc la translation est appliquée en premier, puis la rotation ensuite.

125
David Storey

Je ne peux pas commenter alors voici. À propos de @David Storey answer.

Attention à l'ordre d'exécution dans les chaînes CSS3! La règle est (droite) de (gauche). Pas de gauche à droite.

transformation: translate(0,10%) rotate(25deg);

L'opération "rotation" est effectuée en premier, puis l'opération "traduction" vient ensuite/seconde.

Voir: L'ordre de transformation CSS3 compte: l'opération la plus à droite en premier

7
darthRods

Cela n'est pas nécessaire, car vous pouvez utiliser css 'write-mode' avec les valeurs 'vertical-lr' ou 'vertical-rl' à votre guise.

.item {
  writing-mode: vertical-rl;
}

CSS:writing-mode

4
biojazzard

Quelque chose qui peut être oublié: dans mon projet de chaînage, il s'avère qu'une liste séparée par des espaces nécessite également un point-virgule séparé par des espaces.

En d'autres termes, cela ne fonctionne pas:

transform: translate(50%, 50%) rotate(90deg);

mais cela fait:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
2
Brian Coyle