如何利用CSS3制作3D文字效果

　　下面這篇教程是教你如何用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’