惊掉下巴 | 不可思议的 CSS 3D 效果展示 #165
Description
源自 Amit Sheen。
CSS 3D 诞生之初，只是为了解决一些简单的 3D 场景，实现基于 Web 的轻量 3D 效果，虽然比之 WebGL 在能力上逊色不少，但是还是有人不断再利用 CSS 3D 创造艺术。
本文，就带领大家欣赏一下 CSS 3D 实现的一些不可思议的动画效果，来自于 Amit Sheen 的 CodePen。
注意，以下效果均为纯 CSS 实现：
Newton's CSS cradle
CodePen Demo - Newton's CSS cradle
这里很有意思的一点是，球形是如何做的？
其实没有 3D 球，依靠的是一张一直对着屏幕的圆形，依靠边界的阴影和内部的图案不断旋转，营造出 3D 球的效果。
Table tenniCSS
与上述效果类似，一个旋转的使用 CSS 构建的完整 3D 场景，实现了一个乒乓球动画：
time Tunnel
与之前我实现的时空穿梭效果类似，非常深邃的感觉：
还有类似的这个，我的 3090 都差点带不起了：
CodePen Demo - The illusion of the rainbow corridor
Balls Vortex
玩的就是艺术，此类 CSS 3D 动画的一大核心就是，如何首尾相连，循环往复：
CodePen Demo - Playing with pentagons
Moving light source (CSS)
好家伙，关照都安排上了，这是用 CSS 干 WebGL 的活啊？确实有几分神韵：
CodePen Demo - Moving light source (CSS)
The Lonely Claw (#CSS)
3D 场景的构建，作者是认真的：
CodePen Demo - The Lonely Claw (#CSS)
Rise up
有一些看似没那么复杂，实则需要大量的调试时间，能够使用 CSS 完成它们，不仅仅是技术活，更是体力活：
CodePen Demo - Rise up... (pure CSS)
又或者是这个：
CodePen Demo - Bouncing off the walls...
最后
怎么样，有没有感受到 CSS 的强大与魅力。制作出这些效果并非不可能，需要的是对 CSS 的热爱与不断的尝试打磨。
本文到此结束，希望对你有帮助 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。