1

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

简单地说，我尝试了以下代码，但它不起作用。

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

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

4

5 回答 5

7

您是否尝试添加一个单位？（或单位总裁先生？）

.rotate(90deg)

有关更多信息，请参阅MDN 关于 CSS3 变换和旋转。这就是 LESS.js 或 lessphp 将输出的内容

于 2012-10-18T17:25:12.883 回答
6

为了使用 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 fiddle 中运行它，因为这需要由 lessc 编译器或使用 less js 解析器进行编译。

于 2013-08-21T00:09:41.677 回答
1

我建议使用 LESS 库：LESS Elements它有一个用于旋转的 mixin，它似乎适用于许多浏览器：

.旋转（15度）；将项目顺时针旋转一定度数。

于 2013-08-21T01:39:52.677 回答
1

尝试这样的事情： -

.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-18T17:26:20.293 回答
1

你可以简单地用纯 CSS 编写它，它可以在 LESS: 中工作transform: rotate(90deg);。

于 2012-10-18T17:25:46.770 回答