Como posso girar um HTML <div> 90 graus?

Respostas:

465

Você precisa de CSS para conseguir isso, por exemplo:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Demo:

Mostrar snippet de código

(Há 45 graus de rotação na demo, para que você possa ver o efeito)

Nota: Os prefixos -o-e não-moz- são mais relevantes e provavelmente não são necessários . O IE9 exige -ms-e o Safari e o navegador Android exigem-webkit-

Atualização 2018: os prefixos do fornecedor não são mais necessários. Apenas transformé suficiente. (obrigado @rinogo)

Dziad Borowy
fonte
ele não está mudando eu estou usando isso no arquivo css
user1808433
9
@ user1808433 porque com rotação de 90deg o quadrado ficaria o mesmo :-), aqui está uma demonstração: jsbin.com/opamiq/1 #
Dziad Borowy
7
Também, certificar-se de seu bloco um
Chovy
3
2018 atualização: Só transform: rotate(90deg);é necessário
rinogo
28

Use o seguinte no seu CSS 

div {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
}
عثمان غني
fonte
37
Apenas como uma sugestão para todos os futuros leitores: sempre coloque as regras prefixadas antes da definição dos padrões. Nesse caso, todas as regras prefixadas pelo navegador devem estar antes da transform: rotate(90deg);regra. O motivo seria que, normalmente, você deseja que os padrões tenham precedência e, no CSS, a última definição sempre vence.
Jesse
14

Use transform: rotate(90deg):

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}
<div id="container_2">This box should be rotated 90&deg; on hover.</div>
Expandir snippet

Clique em "Executar trecho de código" e passe o mouse sobre a caixa para ver o efeito da transformação.

Realisticamente, nenhuma outra entrada prefixada é necessária. Consulte Posso usar transformações CSS3?

Zaz
fonte
1
Isso seria melhor como um comentário em uma resposta existente ... ou faça uma edição em uma resposta existente informando que os outros prefixos provavelmente não são necessários. Ter três praticamente as mesmas respostas é inútil.
misterManSam
@Zaz como manter a caixa girada mesmo depois de eu me desviar?
precisa saber é o seguinte
@ayushsharma: Use JS ou veja o estado Make CSS Hover permanecer após “unhovering” : Um hack sugerido existe #element{transition: 9999999s}(o que faz a transição voltar ao normal levar uma eternidade) e #element:hover{transition: .3s}(ou por quanto tempo você deseja que a rotação seja realizada).
Zaz
4

você pode usar o modo de escrita da propriedade css3 gravação gravação: tb-rl

truques de css

mozilla

Ashraf
fonte
0

Podemos adicionar o seguinte a uma tag específica em CSS:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

Em caso de meia rotação, mude 90para 45.

subindas pm
fonte