可视化项目序列3D翻牌动效实现

一、背景：

在最近的数据看板可视化项目中，需要实现人员信息卡片序列翻动的动效，本文主要介绍该动效的实现原理和过程。

二、实现思路：

1.要想实现双面翻转，首先需要定义一个3D盒子；

2.3D盒子中正反重合放置两张卡片，均正面朝外；

3.利用CSS旋转动效实现3D盒子的翻转；

4.序列化翻转需要设置时间差。

三、实现过程：

1.定义3D dom，包含3D容器，相对容器，正面卡牌，反面卡牌

 

2.样式设置，css的运用

(1) 外层容器的样式：

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

(2) 相对容器的样式：

transform-origin设置旋转元素的基点位置

(3)设置正面卡牌的样式：

(4)设置反面卡牌的样式，反面旋转180度：

（5）反面未转过来之前，需要隐藏背面：

backface-visibility 属性定义当元素不面向屏幕时是否可见。

（6）利用css 添加动画效果,并增加缓动效果：

(7) 建立websocket连接，当有新数据产生时，需要翻动第一个卡牌一周移动到第二个的位置，这时需要先使用侦听器去监听新值，当新值产生，执行刷新事件，为页面元素重新增加动画：

（8）一共有5个卡牌，序列翻转需要依次进行，通过定时器计算下一个卡牌的翻动时间：

 

四、完成效果：