Rotar y traducir

86

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.

— Sera
fuente

157

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:

Gire el texto 90 grados. Okay.
traducir 50% por 50%. Ok, esta es la misma propiedad que el paso uno, así que haz este paso e ignora el paso 1.

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.

— David Storey
fuente

23

Descubrí que es muy importante tener en cuenta el encadenamiento. Compare una traducción seguida de una rotación - jsfiddle.net/Mrjm8/3 - con una rotación seguida de una traducción - jsfiddle.net/Mrjm8/2

— Lucas

¿Cómo funciona esto cuando se escribe en HTML, en lugar de CSS?

— JakeTheSnake

2

@JakeTheSnake No es así. Las transformaciones CSS son una característica de CSS.

— Stijn de Witt

2

Wow gracias. Deberías resaltar el aspecto del encadenamiento :) ¡ese fue un elemento clave que muchos blogs y especificaciones nunca mencionan!

— cgatian

@Luke Gracias por señalarlo, ¡el orden realmente importa!

— Yami Odymel

12

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 el translate.

Ver: El orden de transformación CSS3 importa: la operación más a la derecha primero

— darthRods
fuente

4

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

— biojazzard
fuente

2

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

— Brian Coyle
fuente