HTML <div>를 90도 회전하려면 어떻게해야합니까?

245

나는이 <div>내가 90도 회전하려는 :

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

어떻게해야합니까?

html css

— 사용자 1808433
소스

6

구글이 당신을 위해 할 수있는 일 :) : stackoverflow.com/questions/2449668/…

— Benz

예 : w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

이를 위해서는 CSS가 필요합니다. 예 :

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

데모:

코드 스 니펫 표시

#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>

스 니펫 확장

(데모에는 45도 회전하므로 효과를 볼 수 있습니다)

참고 :-o- 및 -moz-접두사가 없습니다 더 이상 관련이 아마 필요가 없습니다 . IE9가 필요 -ms-하며 Safari 및 Android 브라우저가 필요합니다-webkit-

2018 업데이트 : 더 이상 공급 업체 접두사가 필요하지 않습니다. 만 transform충분하다. (@rinogo 덕분에)

— 지아드 보 로니
소스

css 파일에서 이것을 사용하고 있습니다

— user1808433

9

@ user1808433 90deg 회전으로 정사각형이 똑같이 보일 수 있기 때문에 다음과 같은 데모가 있습니다 : jsbin.com/opamiq/1

— Dziad Borowy

7

또한 블록을 확인하십시오

— chovy

3

2018 년 업데이트 : 필요한 것만transform: rotate(90deg);

— rinogo

28

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

— عثمان غني
소스

37

그냥 모든 미래의 독자들에게 제안과 같이 항상 앞에 둔 규칙을 배치 하기 전에 표준 정의. 이 경우 모든 브라우저 접두사 규칙이 규칙 앞에 있어야합니다 transform: rotate(90deg);. 그 이유는 일반적으로 표준이 우선하기를 원하며 CSS에서는 항상 마지막 정의가 우선하기 때문입니다.

— Jesse

14

사용 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>

스 니펫 확장

"코드 조각 실행"을 클릭 한 다음 상자 위로 마우스를 가져 가면 변환의 효과를 볼 수 있습니다.

실제로 다른 접두사 항목은 필요하지 않습니다. CSS3 변환을 사용할 수 있습니까?를 참조하십시오 .

— 자즈
소스

1

이것은 기존 답변 아래의 주석으로 더 좋을 것입니다 ... 또는 기존 접두사를 수정하여 다른 접두사가 필요하지 않을 것임을 진술하십시오. 거의 똑같은 답을 3 개 갖는 것은 도움이되지 않습니다.

— misterManSam

@Zaz 내가 호버링 한 후에도 상자를 회전 상태로 유지하는 방법은 무엇입니까?

— heyayush

@ayushsharma : JS를 사용하거나 "unhovering"후 CSS 호버 상태 유지 : 참조 : 하나의 해킹 #element{transition: 9999999s}에서 (일반적인 상태로 다시 전환하는 데 #element:hover{transition: .3s}시간이 오래 걸리고) 회전이 오래 걸리기를 원합니다.

— Zaz

4

css3 속성 쓰기 모드를 사용할 수 있습니다 쓰기 : tb-rl

CSS- 트릭

모질라

— 아쉬 라프
소스

0

CSS의 특정 태그에 다음을 추가 할 수 있습니다.

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

반 회전의 경우로 변경 90하십시오 45.

— Subindas 오후
소스