CSS传送门_html/css

传送门在线演示地址,Github源码地址

原始视频

视频展示了3D动画场景的构建，美化及动画效果。这篇文章我们将使用CSS3重绘这个传送门视频。重点介绍人物从一个门穿到另一个门的过程。下面是原始视频：

这个视频在第一次发布的时候，就深深的印在了我的脑海中。传送门（创始人 Narbacular Drop ）介绍了一种有趣的3D平台解谜游戏。

在视频中，我们看到这个游戏获得战利品的方式，不同于以往的游戏。文章里，我将尝试看能否只使用HTML和CSS来重现这个场景。

下面的图片就是我们打算要创造的场景。

前言

推荐你使用prefix free 或者 SASS来构建 CSS,可以避免在编写CSS的时候，重复的编写前缀。另外，要注意一下，在不同的浏览器中，兼容性前缀的问题。完整的源码,CSS、SASS还有HTML,都可以在Github上找到。

约定

我们的项目是在Chrome来进行开发和测试的，并不兼容Internet Explorer浏览器。代码中包含的一些有趣的3D动画技术并不是现在的主流，但对于未来的前端开发有着它不可忽视的意义。

准备工作

我们先在HTML中创建一个容器，来告诉浏览器我们想把我们的3D场景的内容放在这里。