下面這篇教程是教你如何用CSS3來制作3D效果的文字，文章翻譯自3D CSS Shadow Text Tutorial。
這個簡單的CSS文本陰影教程將一步步教你如何通過堆疊多層陰影來創建3D文字，然後進一步利用CSS3的transform和transition屬性來實現鼠標移過字體放大的效果。請注意，這個3D文字效果是用純CSS的，沒有用Javascript，並且需要用支持CSS3的浏覽器才能看出效果，如Firefox、Chrome、safari和Opera。
CSS文字陰影是如何實現的
為了實現3D的文字效果，我們將會利用CSS3的text-shadow屬性，text-shadow的工作原理如下：
1
2
3
4
.example-class
{
text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}譯者注：X表示x軸上的位移，可為負值；Y表示y軸上的位移，可為負值；Blur表示投影的寬度，不能為負值；Color為投影的顏色。
堆疊多層CSS投影
雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果
開始創建3D文字
你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個例子中我就用白色的文字，用深一點的灰色作為投影顏色，這個例子中我將H2的文字渲染3D效果，CSS代碼如下：
1
2
3
4
5
6
7
8
9
10
h2
{
text-shadow:
1px
1px 0
#CCC,
2px
2px 0
#CCC, /* end of 2 level deep grey shadow */
3px
3px 0
#444,
4px
4px 0
#444,
5px
5px 0
#444,
6px
6px 0
#444; /* end of 4 level deep dark shadow */
}效果如下：
好了，到這裡你已經創建了基本的3D文字，然而，讓我們進一步來實現鼠標滑過的文字放大效果，並用CSS的transision屬性實現圓滑的淡入淡出效果。
首先用transform屬性實現滑過字體放大
1
2
3
4
5
6
7
h2:hover
{
/* CSS3 Transform Effect */
-webkit-transform: scale(1.2);
/* Safari & Chrome */
-moz-transform: scale(1.2);
/* Firefox */
-o-transform: scale(1.2);
/* Opera */
}效果如下：
然後利用transition屬性實現淡入淡出效果
1
2
3
4
5
6
7
h2
{
/* CSS3 Transition Effect */
-webkit-transition:
all 0.12s ease-out;
/* Safari & Chrome */
-moz-transition:
all 0.12s ease-out;
/* Firefox */
-o-transition:
all 0.12s ease-out;
/* Opera */
}到此，我們就用CSS3實現了3D效果的文字，並且在鼠標滑過是讓字體放大，且有淡入淡出的效果，這一切是用純CSS實現的哦。
下面是這個例子的DEMO，一起看看
3D CSS TEXT
WITH ‘ZOOM’
本文鏈接http://www.cxybl.com/html/wyzz/CSS/20130902/40014.Html