HTML을 회전시키는 방법

HTML을 회전시키는 방법

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도 회전하므로 효과를 볼 수 있습니다)

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

---

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

CSS- 트릭

모질라

---

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-can-i-rotate-an-html-div-90-degrees