Question

我正在尝试使用LESS

来旋转文本

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

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

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

Answer 1

你尝试添加一个单位吗？（或总统先生？）

.rotate(90deg)

有关详细信息，请参阅MDN about CSS3 transform and rotate。这就是LESS.js或lessphp将输出的内容

Answer 2

要使用LESS在所有浏览器（包括ie7到ie10）上进行css轮换，我使用的是这样的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解析器编译。

Answer 3

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

Answer 4

尝试这样的事情： -

.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

Answer 5

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

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

使用LESS旋转文本

5 个答案: