CSS3는 요소를 변환하지만 하위 요소는 변환하지 않습니다.

Question

가로 메뉴가 있으며 왼쪽 또는 오른쪽으로 90 ° 회전하고 싶습니다. transform 속성도 자손을 회전시키는 것이 문제입니다. 그들을 제자리에 다시 넣는 것이 어려워 보입니다. 해결책이 있습니까?

P. 이미지 나 JS 사용을 피하고 싶습니다. 대체로 괜찮습니다.

Answer 1

자손에 역 회전을 적용 할 수 있습니다.

div.parent{ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
} 


div.parent span{ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
} 

예를

를 들어

예 :http://jsfiddle.net/RpcfB/1/

참고로, 당신이 모든 작업을 할 padding 및/또는 margin 함께 플레이해야합니다.

편집

나는 그것보다 더 복잡 두려워.

그건 사실입니다! 언급했듯이, 당신은 CSS를 가지고 놀아야 만합니다. 그런 다음를 대상으로 두 번째 규칙을 변경

1. 처음 li

   #nav_main_gts > li.rotate{ //ADD CLASS HERE 
       -moz-transform: rotate(-90deg); 
       -webkit-transform: rotate(-90deg); 
       -o-transform: rotate(-90deg); 
       -ms-transform: rotate(-90deg); 
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1); 
       transform: rotate(-90deg); 
   } 
   

2. 에 클래스를 추가

   예를 들어, 이러한 조정해야, 첫 번째 문제를 해결하기 위해 다음 ul 아니요 li

3. 다음으로 margin 모든 것을 제자리에 가져다주는 것. 첫 번째 li 아래로 남아 있지 회전하기 때문에 너무 부정적인 margin-left가

   #nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE 
       -moz-transform: rotate(90deg); 
       -webkit-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
       -ms-transform: rotate(90deg); 
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
       transform: rotate(90deg); 
       margin-left:-100px; //ADD A MARGIN HERE 
   } 
   

4. 가 다른 사람들과 계속 필요하다, 기억하십시오.

업데이트 예 :http://jsfiddle.net/FKCTk/1/