Rotation et translation

Question

J'ai des problèmes de rotation et de positionnement d'une ligne de texte. Actuellement, c'est seulement la position qui fonctionne. La rotation fonctionne également, mais uniquement 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.

Answer 1

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

Voici ce qu'il fait :

1. faire pivoter le texte de 90 degrés. Ok.
2. traduire 50% par 50%. Ok, c'est la même propriété que l'étape 1, donc faites cette étape et ignorez l'étape 1.

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

Comme le translate écrase le rotate, 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, de sorte que la translation est appliquée en premier, puis la rotation après.

Answer 2

Attention à l'"ordre d'exécution" dans les chaînes CSS3 ! L'ordre est de droite à gauche, et non de gauche à droite.

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

El rotate est effectuée en premier, puis l'opération translate .

Voir : L'ordre de transformation CSS3 est important : l'opération la plus à droite d'abord

Answer 3

Ce n'est pas nécessaire, car vous pouvez utiliser le paramètre css "writing-mode" avec les valeurs "vertical-lr" ou "vertical-rl", selon votre choix.

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

Answer 4

Quelque chose qui pourrait être oublié : dans mon projet de chaînage, il s'avère qu'une liste séparée par un espace a également besoin d'un point-virgule séparé par un espace à la fin.

En d'autres termes, ça ne marche pas :

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

Mais ça, oui :

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