可视化项目序列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个卡牌,序列翻转需要依次进行,通过定时器计算下一个卡牌的翻动时间:
四、完成效果: