CSS3 3D时间轴文字列表效果

3D 时间轴的文字列表效果，蛮适合用来展示项目节点、活动安排那类信息。用的都是div搭配CSS3搞视觉动效，整体还挺炫的，不难上手。

transform的 3D 旋转是核心，用rotateY()或rotateX()让元素有点“转过去”的感觉，再配上perspective，画面就有深度了，像在空间里漂着一样。

时间轴的结构其实简单，一堆div排成列，每个节点写个时间点、内容。通过position: absolute把它们“摆好位”，容器用position: relative托着就行。

细节上加点border-radius、box-shadow，节点就圆润又有立体感。再加点transition，比如鼠标一靠近，颜色亮一下，或者轻微放大，互动体验一下就上来了。

要是再整点animation，比如节点滚动进视口的时候来个fade-in，加载时依次弹出，视觉节奏就更自然了。整个交互也“活”起来。

代码打包在texiao7850_1560680998里头，直接解压看看源码挺快的。如果你想在项目页里放点有设计感的时间线，不妨参考这个搞一个试试，调样式也挺自由。