CSS에서 애니메이션 회전

Question

90도와 270 도의 각도를 회전하려고하지만 CSS로 표시 할 수 없습니다. 이제 jQuery를 사용하여이 작업을 해결할 수 있습니다. 또한 회전이 90 도인 경우 jQuery는 div의 왼쪽에 표시된 스팬의 높이와 블록을 계산할 수 없습니다.

var height = sender.height();

http://jsfiddle.net/Eg8xU

희망 누군가가 CSS를 통해이 작업을 해결하는 데 도움이 있습니다. 상이한 (임의의)

Answer 1

.rotate { 

/* Safari */ 
-webkit-transform: rotate(-90deg); 

/* Firefox */ 
-moz-transform: rotate(-90deg); 

/* IE */ 
-ms-transform: rotate(-90deg); 

/* Opera */ 
-o-transform: rotate(-90deg); 

/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

} 

자료 각각의 div

PS 폭과 높이가 될 수 http://css-tricks.com/snippets/css/text-rotation/

Answer 2

가 사용할 수있는 둘 -webkit-변환 및 가 -moz-변환

-webkit-transform: rotate(90deg); /*90deg or 270deg*/ 
-moz-transform: rotate(90deg); 

벙어리 Internet Explorer의 경우 다음 코드를 사용할 수 있습니다.

필터 : progid : DXImageTransform.Microsoft.BasicImage (rotation = 3);

회전 = 0 0deg, 1 = 90DEG, 2 = 180도이며, 3 = 270deg

이 표시를 추가하는 것을 잊지 마세요 : 블록는 그래서 그들은 제대로 작동 할 수 있습니다. 여기

은 내가 내 예를 들어이 CSS를 사용하고 볼 수 있습니다,하지만 난 왼쪽 상단에 (오른쪽 변화에 대해, 각 요소에 대해 왼쪽 상단 모서리의 숙박을 기원 변환 알고 정상적으로 codepen