본문 바로가기

IT노트(구)/HTML/CSS

div 90도 회전시키는 방법(transform 이용)

Hello

div를 90도 회전시키려면

css의 transform을 사용하면 된다!

크로스 브라우징을 위해 태그가 조금 복잡하지만

이게 바로 웹디자이너의 전문성이라고 생각한다!(얼마든지 복잡해도 좋다!)

다음은 예제 소스이다.(오른쪽으로 90도 회전된다!)


<style> 
div {
    width: 50px;
    height: 50px;
    background-color: red;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
</style>

<div>Hello</div>