今日、私はこの写真を見ました：
本当に面白い効果ですか？ その実装の秘密を明らかにしてみましょう。
「パースペクティブ」テキストの効果を得るために必要なのは、 div 、 p 、およびspanブロックの3つの要素のみです。 spanはラインアイテムである（既定）ことを思い出してください。したがって、必要に応じて任意の単語/行を "櫛"でつなぐことができます。 しかし、何も素晴らしいことをする必要はありません:) Spanを使用して、行に変換するテキストを分割します。 そして、p要素はテキストをフレーム化します。
テキストを理解しましたが、行ごとに異なるフォントサイズを指定するにはどうすればよいですか？ 少しカンニングし、各行の後にspanタグを閉じませんが、各行が別の行にネストされているようにします。 そして、各行の終了タグをテキストの最後に配置します。 ここでの主なことは、開始タグと終了タグの数を誤って計算しないことです。 そして、コードは次のようになります。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Pellentesque velit lacus,porta vitae, consequat in,aliquam condimentum, tortor. Mauris sed est feugiaterat lacinia rutrum. Fusce dapibus nonummy nisi.Nullam et mi nec arcu tempor pellentesque. Fuscediam dui, pharetra at, pellentesque quis, dapibusut, erat. Curabitur venenatis condimentum nisi.In posuere. Curabitur accumsan, libero egetcongue sodales, lacus mi vehicula lorem,nec rutrum velit nunc vitae magna. Proinet Perspective Text via CSS.
これにより何が得られますか？ 子要素は親要素のプロパティを継承し、後続のネストされた各要素は、最初のブロックではなく、前のブロックに対して値を割り当てることを思い出してください。 たとえば、鮮明な例は次のようになります。たとえば、幅がパーセンテージでネストされたブロックを使用する場合（70％など）。 ネストされた各ブロックの幅は、前のブロックに対して70％であるため、最新のネストされたブロックが最小になります。
次のステップは既に理解していると思います:)これをフォントサイズで行い、パーセンテージで示します。
要素のスタイルは次のようになります。
#text {
margin : auto;
width : 40em;
font-size : 50%;
line-height : 1.6em;
max-width : 90%;
text-align : center;
}
#text p span {
font-size : 1.1em;
display:block;
clear:both;
}
テキストのサイズはemで正確に指定し、常に1 emを超えて指定する必要があることを明確にすることが重要です。そうしないと、効果が異なります。 また、フォントが大きくなっても線が互いにぶつからないように、線間の距離（線の高さ）を覚えておく必要があります。
それが秘密です:)そしてあなたの想像力だけ:)
ここで例を明確に見ることができます
また、コードをダウンロードするためのリンクもあります。
マイクの実験経由