解决使用css元素放大动画导致的文字抖动模糊问题

1.问题

最近在开发一个tv端的项目，各种兼容性问题，只能使用最原生的方式去开发，其中有一个需求就是给选中的元素添加一个放大的动画，我在添加动画之后遇到了元素放大以后，元素上面的文字也会跟着有轻微的位移跟模糊的情况，很影响体验

2.解决方案

经过网上搜索，有人说给抖动的文字加上transform:translate3d(0,0,0)就可以了，经过实测这个方法是无效的。

还有人说给抖动的文字加上transform:perspective(1px)的样式，测试以后发现这个方法是可以的，加上以后文字再也不抖动模糊了，放大效果如丝般顺滑。

为什么呢，为什么这个属性这么神奇？

去了解了一下这个属性，原来它是设置3d元素距视图的距离的，大家可以去了解一下这个神奇的属性，一般很少有人了解到估计，但是关键时刻却是可以救命的。

附上链接w3school.com.cn/cssref/pr_perspective.asp

欢迎关注「不出户」公众号 

在公众号回复「python」，获取全套python学习资源。

在公众号回复「vue」，领取vue核心教程

在公众号回复「react」，领取react全套教程

在公众号回复「angular」，领取angular学习资源

在公众号回复「算法」，领取算法学习教程

在公众号回复「nodejs」，领取nodejs学习教程，更有更多精品资源敬请期待