3

フィドルへのリンクは下部にあります。

親コンテナに変換スタイルを適用してテキスト ノードを膨らませる方法はありますか?

HTML 

<span class='manual-labor-1'>e</span>
<span class='manual-labor-2'>s</span>
<span class='manual-labor-3'>c</span>
<span class='manual-labor-4'>h</span>
<span class='manual-labor-5'>e</span>
<span class='manual-labor-6'>w</span>

<br/><br/><br/>

<span class='just-css-3'>eschew</span>

CSS

.just-css-3 {
    /* ultimate troll wonders if there is a way to do create the same effect using just css3 (tansform?) */
}

    /* begin this is all garbage */
    color:red;
    display:inline-block;
    transform:rotate(-180deg);
    -ms-transform:rotate(-180deg); 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg);
    /* end this is all garbage */
}

.manual-labor-1{ font-size:20px; }
.manual-labor-2{ font-size:50px; }
.manual-labor-3{ font-size:90px; }
.manual-labor-4{ font-size:90px; }
.manual-labor-5{ font-size:50px; }
.manual-labor-6{ font-size:20px; }​

http://jsfiddle.net/uyCZj/3/

4

1 に答える 1

0

残念ながら、まだそうではないようです。::nth-letter() 擬似セレクターを取得するまでは。

::nth-everything
CSS :nth-letter()の呼び出し

当面は、文字体裁用の jQuery プラグインであるLettering.jsを使用してみてください。

于 2012-11-10T21:51:38.273 に答える