텍스트를 역방향으로 기울이는 방법은 무엇입니까?

Question

텍스트 역순으로 또는 왼쪽으로 현재 텍스트의 반대쪽으로 이탤릭체로 표시하고 싶습니다.. HTML/CSS 또는 Javascript/jQuery를 사용하여이 작업을 수행 할 수 있습니까?

Answer 1

FontSquirrel 당신이 많은 온라인 글꼴 얼굴 발전기 중 하나를 사용할 수에 대한

? jsFiddle
코드로 약간 플레이하십시오. 그렇지 않으면 꽤 불가능하다고 확신합니다. 당신은 등, 같은 페인트 샵 등의 이미지 편집 소프트웨어에서이 작업을 수행 할 수 있습니다

#skewed { 
font: 21px Impact, sans-serif; 
text-align: center; 
background: #ccc 
} 
#skewed { 
width:    350px; 
height:   140px; 

-moz-transform: skew(-5deg, -5deg); 
-o-transform:  skew(-5deg, -5deg); 
-webkit-transform: skew(-5deg, -5deg); 
transform:   skew(-5deg, -5deg); 
} 

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div> 

<!--[if IE]> 
<style> 
/* 
* The following two rules are for IE only and 
* should be wrapped in conditional comments. 
* The -ms-filter rule should be on one line 
* and always *before* the filter rule if 
* used in the same rule. 
*/ 

#skewed { 

    /* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, 
M12=-0.08748866352592455,M21=-0.08748866352592455, M22=1, 
SizingMethod='auto expand')"; 

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
     M11=1, 
     M12=-0.08748866352592455, 
     M21=-0.08748866352592455, 
     M22=1, 
     SizingMethod='auto expand'); 


/* 
* To make the transform-origin be the middle of 
* the object. Note: These numbers 
* are approximations. For more accurate results, 
* use Internet Explorer with this tool. 
*/ 
    margin-left: -9px; 
    margin-top: -18px; 

} 
</style> 
<![endif]-->​  

Answer 2

텍스트를 회전시킬 수 있습니다.

http://snook.ca/archives/html_and_css/css-text-rotation

는 어려운 것 같다,하지만 당신은 아마 문자 별 기준으로이 작업을 수행해야합니다. 꽤 의도 된 비뚤어 짐 효과는 아니지만 가까이 있습니다.

Answer 3

나는 뒤쪽으로 기울어 진 특별한 글꼴을 사용하는 것이 유일한 방법이라고 생각합니다.

Answer 4

유일한 실제 옵션 저는 기울임 꼴 문자 모양을 가진 글꼴을 찾아서 (사용자 정의 @font-face을 통해 귀하의 웹 페이지에 포함시키는 것) 믿습니다. 나는 이것이 당신이 찾고있는 것 같아요 같은

Answer 5

나는 Mozilla's transform에서 예제를 사용하여 각 문자를 변환 한 후, 스팬의 각 문자를 래핑하는 jQuery를 사용하는 호세 '데모를 업데이트 문서 & demo :

HTML

<div id="skewed"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. 
    Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a 
    malesuada erat. 
</div> 

jQuery를

귀하의 웹 사이트 this one 같은 왼쪽 기대어 기울임 호환 글꼴로 16,

// html function requires jQuery 1.4+ 
$('#skewed').html(function (i, h) { 
    h = h.replace(/\s+/g, '\u00a0').split(''); 
    return '<span>' + h.join('</span><span>') + '</span>'; 
}); 

CSS

#skewed { 
    font: 24px Georgia, sans-serif; 
    background: #ccc; 
    padding: 10px 20px; 
} 
#skewed span { 
    display: inline-block; 
    /* see https://developer.mozilla.org/en-US/docs/CSS/transform */ 
    -webkit-transform: skewx(20deg); 
      -o-transform: skewx(20deg); 
      transform: skewx(20deg); 
} 

Answer 6

Use and embed. 무료 대안은 here입니다.