Estou tendo problemas para girar e posicionar uma linha de texto. Agora é apenas a posição que funciona. A rotação também funciona, mas apenas se eu desativar o posicionamento.
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
O html é apenas um texto simples.
Respostas:
A razão é porque você está usando a propriedade transform duas vezes. Devido às regras de CSS com cascata, a última declaração ganha se elas tiverem a mesma especificidade. Como ambas as declarações de transformação estão no mesmo conjunto de regras, esse é o caso.
O que está fazendo é o seguinte:
Veja http://jsfiddle.net/Lx76Y/ e abra-o no depurador para ver a primeira declaração sobrescrita
Como a tradução está substituindo a rotação, você deve combiná-los na mesma declaração: http://jsfiddle.net/Lx76Y/1/
Para fazer isso, você usa uma lista de transformações separadas por espaço:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Lembre-se de que eles são especificados em uma cadeia, portanto, a translação é aplicada primeiro e, em seguida, a rotação.
Não posso comentar, então aqui vai. Sobre a resposta de @David Storey.
Tenha cuidado com a "ordem de execução" nas cadeias CSS3! A ordem é da direita para a esquerda, não da esquerda para a direita.
transformation: translate(0,10%) rotate(25deg);
A rotateoperação é feita primeiro, depois o translate.
Veja: A ordem de transformação CSS3 é importante: a operação mais à direita primeiro
Não há necessidade disso, pois você pode usar css 'writing-mode' com os valores 'vertical-lr' ou 'vertical-rl' conforme desejado.
.item {
writing-mode: vertical-rl;
}
Algo que pode ser esquecido: no meu projeto de encadeamento, parece que uma lista separada por espaço também precisa de um ponto e vírgula separado por espaço no final.
Em outras palavras, isso não funciona:
transform: translate(50%, 50%) rotate(90deg);
mas isso faz:
transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"