2012-10-18 5 views
1

덜 사용하여 텍스트를 회전하려고합니다덜 사용하여 텍스트 회전

단순히 다음 코드를 시도하지만 작동하지 않습니다. 여기

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

내 jsfiddle http://jsfiddle.net/D2RLR/2750/

+0

요즘 "일반 CSS"로는 LESS * 허용 *이 허용됩니까? 아니면 변환을 실행하는 일부 jsfiddle 마법입니까? - 저는 항상 CSS 컴파일러를 사용하여 CSS를 실제 CSS로 변환해야한다고 생각했습니다. 귀하의 답변에 대해 –

답변

7

당신이 장치를 추가하려고 했입니까? (또는 단위 미스터 대통령?)

.rotate(90deg) 

자세한 내용은 MDN about CSS3 transform and rotate를 참조하십시오. 그것이 LESS.js 또는 lessphp이 출력 할 내용입니다.

1

일반 CSS로 간단히 작성할 수 있으며 덜 작동합니다 (transform: rotate(90deg);).

+0

+1 감사합니다. 하지만 나에게 그것은 효과가 없습니다. http://jsfiddle.net/D2RLR/2751/ –

+0

예. 당신은 'deg'을 잊어 버렸습니다 : http://jsfiddle.net/D2RLR/2753/ – tuff

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

5

, 나는 이런 믹스 인을 덜 사용하고 사용 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); 
} 

하지만 당신은이 lessc 컴파일러 또는 덜 JS 파서를 사용하여 컴파일해야하기 때문에 JS 바이올린이를 실행할 수 없습니다.

1

나는 덜 라이브러리를 사용하는 것이 좋습니다 : LESS Elements는 브라우저의 많은에서 작동하는 것 같다 회전의 믹스 인이 있습니다

.rotation (15deg를); 시계 방향으로 항목을 몇도 회전시킵니다.