《诺禾》-3D导航按钮效果

今天给大家分下一个使用CSS3徒手写3D效果的教程。我在开发尤娜博客系统的时候，为了制作博客主题，开始学习了前端的一些编程知识，并非专业的前端开发人员，因此，有何不妥之处，望见谅！

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

CSS 3D 导航按钮效果图
工具和资源

我个人在编写后端代码时，习惯于使用IntelliJ IDEA，因此前端的代码编辑工具也使用Jetbrains家族的WebStorm编辑器。你也可以选择自己喜欢的编辑器(编辑器没有什么特殊要求)。
【Java程序猿】徒手暴撸CSS 3D导航按钮效果

Jetbrains WebStorm官网

教程中使用的外部资源是Font Awesome。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
【Java程序猿】徒手暴撸CSS 3D导航按钮效果

Font Awesome官网
Font Awesome图标

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

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

Font Awesome图标列表

Color设置

教程中为每个图标定义了不同的背景颜色，具体如下：
【Java程序猿】徒手暴撸CSS 3D导航按钮效果

颜色配置
Html结构

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

CSS 3D Navigation Bar

//省略剩余四个li元素

Style样式

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

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

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

3D按钮默认效果

代码完成后，当鼠标滑过图标时，图标会向上升起，同时会分成5个不同透明度的渐变层。效果如下：
【Java程序猿】徒手暴撸CSS 3D导航按钮效果

鼠标滑动效果