Tengo algunos problemas para rotar y colocar una línea de texto. Ahora es solo la posición la que funciona. La rotación también funciona, pero solo si desactivo el posicionamiento.
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
El html es solo texto sin formato.
La razón es porque está usando la propiedad transform dos veces. Debido a las reglas CSS con la cascada, la última declaración gana si tienen la misma especificidad. Como ambas declaraciones de transformación están en el mismo conjunto de reglas, este es el caso.
Lo que está haciendo es esto:
Consulte http://jsfiddle.net/Lx76Y/ y ábralo en el depurador para ver la primera declaración sobrescrita
Como la traducción sobrescribe la rotación, debe combinarlos en la misma declaración: http://jsfiddle.net/Lx76Y/1/
Para hacer esto, usa una lista de transformaciones separadas por espacios:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Recuerde que se especifican en una cadena, por lo que la traslación se aplica primero, luego la rotación después de eso.
No puedo comentar, así que aquí va. Acerca de la respuesta de @David Storey.
¡Tenga cuidado con el "orden de ejecución" en las cadenas CSS3! El orden es de derecha a izquierda, no de izquierda a derecha.
transformation: translate(0,10%) rotate(25deg);La
rotateoperación se realiza primero, luego eltranslate.Ver: El orden de transformación CSS3 importa: la operación más a la derecha primero
fuente
No es necesario, ya que puede usar css 'modo de escritura' con los valores 'vertical-lr' o 'vertical-rl' según lo desee.
.item { writing-mode: vertical-rl; }fuente
Algo que puede perderse: en mi proyecto de encadenamiento, resulta que una lista separada por espacios también necesita un punto y coma separado por espacios al final.
En otras palabras, esto no funciona:
transform: translate(50%, 50%) rotate(90deg);pero esto hace:
transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"fuente