회전하는 방법회전하는 방법90도?

회전하는 방법

90도?

나는 있습니다<div>90도 회전하고 싶어요

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

어떻게 해야 하나요?

이를 위해 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도 회전이 있어서 효과를 볼 수 있습니다)

참고: The-o-그리고.-moz-접두사는 더 이상 관련이 없으며 필요하지 않을 수도 있습니다.IE9 요구 사항-ms-그리고 Safari와 Android 브라우저는 필요합니다.-webkit-

---

2018 업데이트: 공급업체 접두사는 더 이상 필요하지 않습니다.오직.transform충분합니다.(고마워 @rinogo)

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

사용하다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 변환을 사용할 수 있습니까?를 참조하십시오.

css "rotate()" 메서드를 사용합니다.

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#rotate{
  transform: rotate(90deg);
}

<div>
normal div
</div>
<br>

<div id="rotate">
This div is rotated 90 degrees
</div>

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

대소문자 구분법

모질라

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

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

반회전 변경의 경우90로.45.

언급URL : https://stackoverflow.com/questions/14233341/how-to-rotate-a-div-90-degrees