使用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旋轉文字

回答

相關問題