使用LESS旋转文本

Question

我正在尝试使用LESS旋转文本

简单地说,我尝试以下代码,但它不起作用.

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

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

Answer 1

你试过添加一个单位吗？(或总统先生？)

.rotate(90deg)

有关详细信息,请参阅有关CSS3转换的MDN和旋转.这就是LESS.js或lessphp将输出的内容

Answer 2

要使用LESS使css旋转在所有浏览器上工作,包括ie7到ie10,我使用这样的mixin:

.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(rotation=@IEdeg);
}

#divToRotate {
   .rotate(270);
}

但是你将无法在js小提琴中运行它,因为这需要由lessc编译器或使用less js解析器编译.