使用 HTML 和 CSS 创建 3D 文本效果

3D 文字效果是网页设计世界中最常用的文字效果之一。作为设计师或前端开发人员，应该知道如何创建 3D 文本效果。今天，我们将研究以 3D 外观创建文本的最简单方法之一。
方法： 3D文字动画效果是通过text-shadow属性设计的。应用多个文本阴影的原因是为了提供 3D 外观，就好像我们只应用单个（或单一）文本阴影一样，它对于单词中存在的所有字母都是相同的。但是对于 3D 效果，我们希望每个字母和每个角度（基本上是 X 和 Y 坐标以及模糊半径）的阴影厚度不同。现在让我们看看上述方法的实现。
HTML 代码：在本节中，我们使用了

标签，其中包含要应用 3D 效果的单词。

html

 

    
    
    

 

    
GeeksforGeeks

 

CSS 代码：

• 第 1 步：我们所做的第一件事是将

  元素居中对齐并提供主体背景。

• 第 2 步：现在，对 h1 元素应用过渡。持续时间可以根据您的需要进行调整。
• 第 3 步：现在在 h1 元素上应用文本阴影。应用多个文本阴影的概念已经在文章开头的方法中进行了解释。

提示：我们必须选择应用仅在鼠标悬停时可见的效果，但如果您希望效果始终可见，请移除悬停选择器。

CSS

完整代码：在本节中，我们将结合以上两个部分来创建鼠标悬停时的 3D 文本动画效果。

HTML

 

    
    
    
 
    

 

    
GeeksforGeeks

 

输出：