1

LESSを使用してテキストを回転させようとしています

単純に、次のコードを試しましたが、機能しません。

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

これが私のjsfiddlehttp : //jsfiddle.net/D2RLR/2750/です

4

5 に答える 5

7

ユニットを追加してみましたか？（またはユニット社長さん？）

.rotate(90deg)

詳細については、CSS3の変換と回転に関するMDNを参照してください。それがLESS.jsまたはlessphpが出力するものです

于 2012-10-18T17:25:12.883 に答える
6

LESSを使用してie7からie10を含むすべてのブラウザーで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(rotation=@IEdeg);
}

#divToRotate {
   .rotate(270);
}

ただし、これはlesscコンパイラーまたはless jsパーサーを使用してコンパイルする必要があるため、jsfiddleで実行することはできません。

于 2013-08-21T00:09:41.677 に答える
1

単純なCSSで書くだけで、LESSで動作しますtransform: rotate(90deg);。

于 2012-10-18T17:25:46.770 に答える
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

LESSライブラリを使用することをお勧めします。LESSElementsには、多くのブラウザで機能するように見える回転用のミックスインがあります。

.rotation（15deg）; アイテムを時計回りに数度回転させます。

于 2013-08-21T01:39:52.677 に答える