Como posso girar um HTML <div> 90 graus?

245

Eu tenho um <div>que eu quero girar 90 graus:

<div id="container_2"></div>

Como posso fazer isso?

html css

— user1808433
fonte

6

O que o Google pode fazer por você :): stackoverflow.com/questions/2449668/...

— Benz

Um exemplo: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

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

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="container_2"></div>

Expandir snippet

(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