html - HTMLで円形の周りに透視テキストを作成する方法は?

Question

メニューとコンテンツにパースペクティブ テキストを含む Web ページを作成する必要があります。以下は、達成すべき効果の画像へのリンクです。出来ますか？どこから始めれば？私は無知で、何をするのが最善なのかさえわかりません。助けていただければ幸いです。

http://goo.gl/Wlz5b

Answer 1

テキストの回転

テキスト要素を回転する必要がある場合は、CSS3 で2D 変換 回転を使用して行うことができます。

IE8 以前をサポートするには、IE マトリックス フィルターを使用する必要があります(および、テキストを正しく配置するための追加作業が必要です)。

JSFiddleデモ

HTML

<div class="content">
    <p class="text text1">This is a short sentence.</p>
    <p class="text text2">This is a second sentence.</p>
    <p class="text text3">This is a third sentence.</p>
</div>

CSS

.text {
    -webkit-transform-origin: 0% 0%;
       -moz-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
}
.text1 {
    -webkit-transform: rotate(-4deg);
       -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
            transform: rotate(-4deg);

}
.text3 {
    -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg);

}

3D 回転

真の 3D パースペクティブが必要な場合 (テキストの一方の端がもう一方の端よりも大きいなど)、クロスブラウザーの管理が難しくなります。質問のモックアップには、3D パースペクティブがないようです。