Tourner 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 aussi, mais seulement si je désactive le positionnement.

CSS:

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

Le HTML n’est que du texte brut.

La raison en est que vous utilisez la propriété transform deux fois. 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 sont dans le même ensemble de règles, c’est le cas.

Qu’est-ce qu’il fait est la suivante:

  1. faire pivoter le texte de 90 degrés. D’accord.
  2. traduire 50% de 50%. Ok, c’est la même propriété que la première étape, 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 remplacée

Comme la traduction remplace la rotation, vous devez les combiner dans la même déclaration à la place: 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, de sorte que le traduction est appliqué en premier, puis le tour après.

Je ne peux pas commenter alors va ici. A propos de @David Storey répond.

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 “rotate” est effectuée en premier, à la différence de l’opération “translate”.

Voir: L’ ordre de transformation CSS3 est important: opération la plus à droite en premier

Cela n’est pas nécessaire, car vous pouvez utiliser css ‘writing-mode’ avec les valeurs ‘vertical-lr’ ou ‘vertical-rl’ comme vous le souhaitez.

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

CSS: mode d'écriture

Quelque chose qui pourrait être manqué: 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 à la fin.

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 ";"