【Java程序猿】徒手暴撸CSS 3D导航按钮效果

今天给大家分下一个使用CSS3徒手写3D效果的教程。我在开发

尤娜博客系统的时候，为了制作博客主题，开始学习了前端的一些编程知识，并非专业的前端开发人员，因此，有何不妥之处，望见谅！

CSS 3D 导航按钮效果图

工具和资源

我个人在编写后端代码时，习惯于使用IntelliJ IDEA，因此前端的代码编辑工具也使用Jetbrains家族的WebStorm编辑器。你也可以选择自己喜欢的编辑器(编辑器没有什么特殊要求)。

Jetbrains WebStorm官网

教程中使用的外部资源是Font Awesome。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Font Awesome官网

Font Awesome图标

在本案例中，使用了五个Font Awesome图标，它们是：

Font Awesome图标列表

Color设置

教程中为每个图标定义了不同的背景颜色，具体如下：

颜色配置

Html结构

教程中的HTML结构很简单，使用了一个ul元素，并在其中定义了5个li元素。结构如下：

<code>


    
    
    
    CSS 3D Navigation Bar


     

        

            
                

                

                

                

                

            
        
        //省略剩余四个li元素
    


/<code>

Style样式

在本例中，使用的布局为flex布局，另外还用到了几个核心的CSS属性：

• transform-style: preserver-3d: 该属性设置在父级元素中，让子元素具有3D效果；
• transform: rotate() : 定义 2D 旋转，在参数中规定角度。
• transform: skew() : 定义沿着 X 和 Y 轴的 2D 倾斜转换。
• transform-origin: top : 定义视图被置于X轴/Y轴/Z轴的位置。

最终效果：

3D按钮默认效果

代码完成后，当鼠标滑过图标时，图标会向上升起，同时会分成5个不同透明度的渐变层。效果如下：

鼠标滑动效果

如果你对该教程感兴趣，可以点击下方链接，在线观看本文的视频教程：

《【Java程序猿】徒手撸CSS 3D 导航栏效果》视频教程