css - 有什么方法可以只使用变换在中间产生一段文本凸起？

Question

指向小提琴的链接在底部。

有没有办法通过将变换样式应用到它的父容器来凸出一个文本节点？

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/

Answer 1

不幸的是，似乎还没有。直到我们得到 ::nth-letter() 伪选择器。

呼吁 ::nth-everything
CSS :nth-letter()

同时，您可以尝试使用Lettering.js，一个用于排版的 jQuery 插件。