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

工具和资源

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

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

Font Awesome图标

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

Color设置

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

Html结构

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS 3D Navigation Bar</title>
</head>
<body>
    <ul>
        <li>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span class="fa fa-wechat"></span>
            </a>
        </li>
        //省略剩余四个li元素
    </ul>
</body>
</html>

Style样式

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

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

最终效果：

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

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

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

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

「Java程序猿」从0到1徒手撸CSS 3D动态按钮