CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

<h1 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1>

.hover-text-3d {
    フォントサイズ: 7em;
}
.hover-text-3d {
    位置: 絶対;
    上位: 50%;
    左: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: 変換(-50%、-50%);
    -o-transform: 変換(-50%, -50%);
    変換: translate(-50%, -50%);
    -webkit-テキスト塗りつぶし色: #fff;
    テキスト塗りつぶし色: #fff;
}
.hover-text-3d:before {
    位置: 絶対;
    オーバーフロー: 非表示;
    幅: 0;
    コンテンツ: attr(データテキスト);
    -webkit-トランジション: 2s;
    -o-遷移: 2s;
    遷移: 2秒;
    -webkit テキストの塗りつぶし色: #aaf0d1;
    テキスト塗りつぶし色: #aaf0d1;
    -webkit-テキストのストローク幅: 2px;
    テキストのストロークの幅: 2px;
    -webkit テキスト ストロークの色: #aaf0d1;
    テキストストロークの色: #aaf0d1;
    -webkit-filter: ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
    -o-filter:ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
    フィルター: ドロップシャドウ(5px 5px 5px rgba(0, 0, 0, .8));
}
.hover-text-3d:hover:before {
    幅: 100%;
}