CSS3で3Dテキストを作成する方法-jsチュートリアル-php.cn

CSS3で3Dテキストを作成する方法

Jennifer Aniston

リリース： 2025-03-02 00:04:11

オリジナル

907 人が閲覧しました

このチュートリアルでは、CSS3の

プロパティのみを使用して3Dテキスト効果を作成し、画像、プラグイン、またはキャンバスを避けています。深さの錯覚は、微妙な色とオフセットのバリエーションで複数のテキストシャドを重ねることによって達成されます。 text-shadow

How to Create 3D Text With CSS3 この画像は、レイヤー化手法を示しています。それぞれが前のものからわずかにオフセットされている複数のテキストシャドは、3D効果を作成します。実際の実装では、色の違いは最小限です（約1px離れています）。

いくつかのぼやけた影でさらなるリアリズムが追加されます。完全なCSSコードを以下に示します： How to Create 3D Text With CSS3

完全な例とソースコードが利用可能です（例のページへのリンク）。この効果は視覚的に魅力的ですが、CSSコードのかなりの量は、より単純なソリューションの必要性を強調しています。将来の開発はこれに対処します

p.threeD {
  text-shadow:
    -1px 1px 0 #ddd,
    -2px 2px 0 #c8c8c8,
    -3px 3px 0 #ccc,
    -4px 4px 0 #b8b8b8,
    -4px 4px 0 #bbb,
    0px 1px 1px rgba(0,0,0,.4),
    0px 2px 2px rgba(0,0,0,.3),
    -1px 3px 3px rgba(0,0,0,.2),
    -1px 5px 5px rgba(0,0,0,.1),
    -2px 8px 8px rgba(0,0,0,.1),
    -2px 13px 13px rgba(0,0,0,.1);
}

ログイン後にコピー

このセクションは、CSS3を使用して3Dテキスト効果の作成とカスタマイズに関する一般的な質問に答えます。

Q：CSS3を使用して3Dテキスト効果を作成するにはどうすればよいですか？ a：上記の例ではを使用しますが、真の3D効果は通常、

プロパティ（

、

、を含む）を使用して作成されます。より広いブラウザの互換性には、ベンダーのプレフィックスが必要になる場合があります。

Q：text-shadowプロパティの役割は何ですか？transform rotateXa：rotateY視聴者とz = 0平面間の距離を定義し、3D効果の深さに影響します。値が低いと、より顕著な視点が作成されます rotateZperspectiveQ：CSS3？

で3Dテキストをアニメーション化できますか a：はい、perspectiveおよびアニメーションプロパティを使用します。アニメーションステージを定義し、アニメーションプロパティが全体的なアニメーションを制御します。

Q：3Dテキストにシャドウを追加するにはどうすればよいですか？

a：要素全体の影にはperspectiveプロパティ（上記のように）または

を使用します。

Q：すべてのブラウザに3Dテキストが正しく表示されないのはなぜですか？ A：古いブラウザーには3D変換サポートがない場合があります。ベンダーのプレフィックス（