本文默认读者掌握一定的 CSS 3D 知识，能够绘制初步的 3D 动画效果。当然这里会再简单过一下 CSS 3D 的基础知识。

　　当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。

　　perspective为一个元素设置三维透视的距离，仅作用于元素的后代，而不是其元素本身。

　　简单来说，当元素没有设置perspective时，也就是当perspective:none/0时所有后代元素被压缩在同一个二维平面上，不存在景深的效果。

　　对于初次接触 CSS 3D 的同学而言，可以通过绘制正方体快速熟悉语法，了解规则。

　　叠加两个，调整颜色和透明度，我们可以非常轻松的实现 Webpack 的 LOGO：

　　当然，这里的 LOGO 为了保证每条线条视觉上的一致性，其实是没有设置景深效果perspective的，我们可以尝试给顶层父容器添加一下如下代码，通过transform和perspective调整视觉角度，设置景深效果：

　　OK，热身完毕，接下来，让我们插上想象的翅膀，走进 CSS 3D 的世界。

　　我们可以通过叠加阴影多层，营造 3D 的感觉，主要是合理控制阴影的距离及颜色，核心 CSS 代码如下：

　　基于此，我们可以实现一些 3D 文字效果，来看一个 3D 氖灯文字效果，核心就是：

　　完整的代码，你可以猛击这里 CSS 灵感 -- 使用阴影实现文字的 3D 氖灯效果

　　当然，上述第一种技巧其实没有运用 CSS 3D。下面我们使用 CSS 3D 配合 translateZ 再进一步。

　　合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。

　　可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。

　　还是同一个动画效果，如果动画的初始旋转角度设置的稍微大一点，整个效果就会穿帮：

　　可以看到，在前几帧，能看出来简单的分层结构。又或者，简单调整一下perspective，设置父容器的perspective由2000px改为500px，穿帮效果更为明显：

　　也就是说，在恰当的距离，合适的角度，我们仅仅通过很少的元素，就能在视觉上形成比较不错的 3D 效果。

　　当然，发挥想象，我们还可以利用 3D 文字效果，制作出非常多有意思的效果。

　　嗯，上述章节主要是关于文字的 3D 效果，下面我们继续探寻 3D 在营造空间效果上的神奇之处。

　　优秀的 3D 效果，能让人有一种身临其境的感觉，都说 CSS 3D 其实作用有限，能做的不多，但是不代表它不能实现酷炫逼真的效果。

　　简单掌握原理，我们也可以很轻松的利用 CSS 3D 绘制一些非常有空间美感的效果。

　　首先，我们借助 Grid/Flex等布局，在屏幕上布满格子（item），随意点就好：

　　接着，改变下每个 item 的形状，让他变成长条形的，可以改变通过改变 item 宽度，使用渐变填充部分等等方式：

　　Wow，仅仅 3 步，我们就初步得到了一副具有空间美感的图形，让我们再回到每个子 item 的颜色设置，给它们随机填充不同的颜色，并且加上一个transform: translate3d()的动画，一个简单的 CSS 3D 作品就绘制完成了：

　　在这里，我再次推荐 CSS-Doodle 这个工具，它可以帮助我们快速的创造复杂 CSS 效果。

　　当然，基于上述技巧，有的时候会认为利用 CSS 绘制一些线条、圆弧、方块比较麻烦。可以进一步尝试利用现有的素材基于 CSS 3D 进行二次创作，这里有一个非常有意思的技巧。

　　一共设置了 5 个子元素，不过仔细看 CSS 代码，其中 4 个子元素都设置了rotateX/Y(90deg/-90deg)，也就是绕 X 轴或者 Y 轴旋转了 90，在视觉上是垂直屏幕的一张平面，所以直观视觉上我们是不到的，只能看到一个平面.item-middle。

　　不过，见证奇迹的时候来了，此时，我们给父元素.g-container设置一个极小的perspective，譬如，设置一个perspective: 4px，看看效果：

　　由于perspective生效，原本的平面效果变成了 3D 的效果。接下来，我们使用上面准备好的星空图，替换一下上面的背景颜色，全部都换成同一张图，神奇的事情发生了：

　　由于设置的perspective非常之下，而每个 item 的transform: translateZ(50px)设置的又比较大，所以图片在视觉上被拉伸的非常厉害。但是整体是充满整个屏幕的。

　　接下来，我们只需要让视角动起来，给父元素增加一个动画，通过控制父元素的translateZ()进行变化即可：

　　最终完整的效果如下，星空穿梭的效果，整个动画首尾相连，可以一直无限下去，几乎没有破绽，非常的赞：

　　上述的完整代码，你可以猛击这里：CSS 灵感 -- 3D 宇宙时空穿梭效果

　　OK，当掌握了上述技巧之后，我们可以很容易的对其继续变形发散，实现各种各样的无限延伸的 3D 视角动画。

　　原理与上述的星空穿梭大致相同，4 面墙的背景图使用 CSS 渐变可以很轻松的绘制出来，接下来就只是需要考虑如何让动画能无限循环下去，控制好首尾的衔接。

　　该效果最早见于 jkantner 的 CodePen，在此基础上我对其进行了完善和丰富，完整代码，你可以猛击这里：CSS 灵感 -- 3D 无限延伸视角动画

　　本章节的内容之前在我的另外一篇文章，也有过一些讨论 -- CSS 实现视差效果

　　很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

　　那么，运用 translate3d 的视差效果，又能有一些什么好玩的效果呢？下面这个滚动视差文字阴影/虚影效果很有意思：

　　另外一种就是我们可以把这个技巧运用到类似个人主页，图片展示等一些大屏场景下。

　　核心就是给每张图片设置不同的translateZ，给父元素设置一个persepective即可，这样，在上下滚动的过程中，就能出现简单的视差效果：

　　同理，这个滚动视差不仅仅可以作用于上下的滚动，对于左右方向的滚动也是同样生效的：

　　在我自己的个人网站的 404 页面，就使用 CSS 3D 实现的立方体制作的一个 404 效果：

　　控制下落的缓动函数，及落地的震荡动画（为了效果更为逼真，运用了设计动画中的预备动作、跟随和重叠动画等技巧）

　　整体制作还是非常有难度的，但是用在自己的 404 页面，确实也是非常的酷炫。这个效果，我最早见于 Yusuke Nakaya 大神，完整的代码你可以戳这里：CodePen -- Only CSS: 404 Rolling Box

　　我们可以把这个立方体想象成一个立体的进度条容器，通过控制 6 面的颜色，我们可以巧妙的得到一种 3D 进度条效果。

　　当然，其实我们不需要那么多面，4 个面即可，去掉左右，然后利用渐变修改一下立方体各个面的颜色，去掉 border，核心的 CSS 代码如下：

　　当然，进度条嘛，它需要一个填充动画。由于我们使用的是渐变实现的进度条的进度，需要去控制其中的颜色百分比变化。

　　而正常而言，CSS 是不支持渐变的动画的，不过这也难不倒我们，因为我们可以使用 CSS @Property 。

　　这样，我们就实现了一个会动的 3D 进度条，只需要控制--perCSS 自定义属性即可，效果如下：

　　对于 CSS @Property 不算很了解的，可以看看作者的这篇文章 -- CSS @property，让不可能变可能，它的出现，让 CSS 极大的提升了制作各种动画的能力。

　　感谢阅读到此，如果认真看完上述内容，相信你一定会惊叹于 CSS 的神奇。希望本文的内容能够让你：

　　当然，新奇有趣的 CSS 3D 内容还有很多，我还有非常多个有意思的 DEMO 没有贴出来，当然对于本文的内容，我觉得已经足够充实，剩下的下次继续分享。

　　仅使用 CSS 能制作出多惊艳的动画？我觉得这个问题没有答案，随着 CSS 语言不断发展，各种新特性的持续加入，虽然某些方面比不上一些更专业的语言，但是它也在便利性、易学性上有着自己的优势。

　　到此这篇关于利用CSS制作3D动画的文章就介绍到这了,更多相关CSS制作3D动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

　　编程客栈为广大编程爱好者、程序员提供专业且权威的编程教程，是您学习软件编程、网络编程、数据库、操作系统、程序设计、脚本、网页制作、建站技术、网站技巧、网络知识技术、CMS教程等必备网站，我们希望成为您心中理想的编程学习网站。凯发国际首页凯发国际首页