css - H2内で要素を回転

Question

90 度<span>以内でa を回転させようとしています。<h2>

今、回転するように設定しただけでは何も起こりませんが、に追加するdisplay:blockとspan回転します。h2私の問題は、残りの部分を次の行にプッシュすることです。

中央で回転させてh2表示を1行に表示する方法はありますか?span

これがどのように見えるかです

HTML:

<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>

CSS:

span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}