在CSS中旋转动画

我想旋转90度和270度的跨度，但无法在CSS中创建。现在我可以使用jQuery来解决这个任务。当jQuery旋转90度时，无法计算跨度的高度和块显示在div的左侧。在CSS中旋转动画

var height = sender.height();

希望有人能帮助我解决通过CSS这个任务。每个格的

PS的宽度和高度可以是不同的（随机的）

2014-04-02 makarovalv

.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/

来源

2014-04-02 04:07:00

演示正如你可以看到我在我的例子中使用这个CSS，但我要知道一个转换原点的每个元素，右变换（左上角留在左上角父母的角落）。 – makarovalv

如果您也需要，您可以使用边距和负边距来移动元素。那个，或者使用绝对位置并且以这种方式对齐它们。 –

可以同时使用-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

来源

2014-04-02 06:20:28 Anthony

在CSS中旋转动画

回答

相关问题