Lettering.JSのサンプル

文字を回転させる

$("#demo1 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

The Result

我が輩は猫である。

文字を回転させたり、色変えたり

jQuery---
		$("#demo2 h1").lettering().children("span");
		
		css---
		#demo2 .char1,#demo2 .char3,#demo2 .char5{
display:inline-block;
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);  /* IE9 */
transform: rotate(-90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE5.5+ */
color: blue;
}
		

The Result

我が輩は猫である。

「、」や「。」も地道になんとか

$("#demo3 h1").lettering('words').children("span").lettering();
		

The Result

おーい、お茶。そうだ京都、いこう。

おーい、お茶。そうだ京都、いこう。

Operaではletter-spacingはうまく効きませんね