今天给大家分下一个使用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元素。结构如下：
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轴的位置。
最终效果：
3D按钮默认效果
代码完成后，当鼠标滑过图标时，图标会向上升起，同时会分成5个不同透明度的渐变层。效果如下：
鼠标滑动效果
如果你对该教程感兴趣，可以点击下方链接，在线观看本文的视频教程：
《【Java程序猿】徒手撸CSS 3D 导航栏效果》视频教程
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
