使用LESS旋转文字

我想通过使用LESS旋转文字使用LESS旋转文字

简而言之，我尝试下面的代码，但它不起作用。

.my-class { 
    color: #ff0000; 
    .rotate(90); 
}

这里是我的jsfiddle http://jsfiddle.net/D2RLR/2750/

来源

2012-10-18 Lorraine Bernard

这些天是否被允许*作为“普通CSS”？或者它是否能够运行转换的一些jsfiddle魔法？ - 我一直认为LESS需要使用“CSS编译器”将其变为真正的CSS。 – 2012-10-18 17:28:46

你尝试加入一个单位？（或一个单元总裁致辞？）

.rotate(90deg)

更多信息请参见MDN about CSS3 transform and rotate。这就是LESS.js或lessphp会输出的内容

来源

2012-10-18 17:25:12 FelipeAls

您可以简单地将它写入纯CSS中，它将在LESS中工作：transform: rotate(90deg);。

来源

2012-10-18 17:25:46 tuff

+1感谢您的回答。但对我来说这是行不通的。 http://jsfiddle.net/D2RLR/2751/ –

是的。你忘了'deg'：http://jsfiddle.net/D2RLR/2753/ – tuff

尝试是这样的： -

.box_rotate { 
-moz-transform: rotate(7.5deg); /* FF3.5+ */ 
    -o-transform: rotate(7.5deg); /* Opera 10.5 */ 
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ 
    }

检查此链接： - http://snook.ca/archives/html_and_css/css-text-rotation

来源

2012-10-18 17:26:20

为了让所有的浏览器包括通过使用较少的，我使用的是这样一个混合IE10 IE7 CSS轮换的工作：

.rotate(@deg: 90) { 
    /* Safari */ 
    -webkit-transform: rotate(@deg * 1deg); 
    /* Firefox */ 
    -moz-transform: rotate(@deg * 1deg); 
    /* IE10+ */ 
    transform: rotate(@deg * 1deg); 
    /* Opera */ 
    -o-transform: rotate(@deg * 1deg); 
    /* Internet Explorer */ 
    @IEdeg: round(@deg/90, 0); 
    filter: progid:DXImageTransform.Microsoft.BasicImage([email protected]); 
} 

#divToRotate { 
    .rotate(270); 
}

但你不能在JS小提琴运行这个，因为这将需要由lessc编译或使用更少的js解析器进行编译。

来源

2013-08-21 00:09:41 chrisvip

我建议使用LESS库：LESS Elements它有一个旋转混合料搅拌，这似乎在很多浏览器的工作：

.rotation（15deg）;将项目顺时针旋转若干度。

来源

2013-08-21 01:39:52

使用LESS旋转文字

回答

相关问题