CSS传送门_html/css_WEB-ITnose

你不一定必须使用javascript才能在浏览器端构建惊心动魄的3D效果的项目。在这篇文章中，我将介绍一种纯CSS实现的复杂的动画效果。

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

原始视频

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

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

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

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

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

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

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

在这里我们使用了HTML5中的article标签，来表示这是独立的一段内容。
我们要提到的第一个属性是 perspective。这个属性的值用像素值来表示3D场景的景深。通常的设定范围是800px到1200px。

这个场景给我们感觉很像是一个大房子，我们设置他的perspective值为 2600px，忽略前缀，写法如下：

article.container { perspective: 2600px;}

这个容器有一个Z轴景深，我们需要决定一下它的透视点。通过设置perspective-origin属性，来设置我们的消失点，决定我们是从上向下看，还是从某一边看去。

.container { perspective-origin: 50% -1400px;}

perspective-origin这个属性可以设置两个值，水平和垂直方向。这里我们设置了水平方向为50%，垂直方向向上1400像素。相当于我们是在物体上方从下看。

我是使用Chrome浏览器的检查元素和肉眼来调整和决定这个值的。当你设置了你想要的场景画面，你的值可能会比这个数值要高或者低。这决定于你想要表达的效果。另外，需要谨记，这个值会影响动画效果和其他一些有趣的视觉角度转换(perspective-change effects)。

HTML中的对象是很普通的HTML元素，他们是矩形的，有宽和高。这就意味着你所创建3D对象，需要把这些矩形放在该有的位置上。这种方式不同于由点到线，再到图形的方法。换种说法，也就是说，我们无法使用圆，立方体来画。

3D场景中HTML元素的摆放需要用到 transform 属性。

transform可以实现对HTML元素的一系列的调整。比如，移动元素，旋转角度, 倾斜或放大缩小。这些变形可以叠加使用。

.example { transform: rotateY(45deg) translateZ(-100px);}

这段代码的意思是将元素沿着Y轴顺时针旋转45度，沿Z轴向后100像素。效果如图：

当你想旋转元素的时候，需要设置一个起始点，我们用 transform-origin属性来实现，可以传三个参数，分别是X轴，Y轴，Z轴。

.default-origin { transform-origin: 50% 50% 0;}

目前的例子里，我没有特别设置，保留了原有的默认值，但我们需要知道有这么个属性。

结合效果图，我们拼合属于我们自己的3D杰作。先用HTML和CSS来构建我们的3D对象。我们有必要花一分钟的时间来理解一下我们这种方法和其他3D软件的区别。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112429

更新时间：2022-11-17 阅读：35次