IT노트(구)/HTML/CSS

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

스프링연구소 2015. 12. 5. 14:28
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>