在CSS中旋轉動畫

Question

我想旋轉90度和270度的跨度，但無法在CSS中創建。現在我可以使用jQuery來解決這個任務。 當jQuery旋轉90度時，無法計算跨度的高度和塊顯示在div的左側。

var height = sender.height();

http://jsfiddle.net/Eg8xU

希望有人能幫助我解決通過CSS這個任務。每個格的

PS的寬度和高度可以是不同的（隨機的）

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); 

} 

來源：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，您可以使用下面的代碼：

filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;

旋轉= 0是0deg，1 = 90度，2 = 180deg，和3 = 270deg

不要忘記添加顯示：塊，這樣他們可以正常工作。

下面是codepen