css3-animation实践1 两个元素的翻转与切换

今天开发项目时，表格信息填写下方会有提示行，为蓝色背景。提交表格数据时候，如果有错误提示，会在提示行上方，背景红色。但是两层提示会显得很碍眼，所以自己想法是如果有错误提示，直接翻转提示行180度然后显示错误提示，然后2s后错误提示翻转回到提示行。大概就是这么个简单动画。

这里一开始打算用一个div来翻转和显示，但是翻转180度以后，元素里面的字体是倒的，这显然不符合我们的要求。后来终于找到了解决办法。

当我们进行3d转换的时候，有一个属性可以设置backface-visibility。参考W3C的解释：http://www.w3school.com.cn/cssref/pr_backface-visibility.asp

大致意思就是当元素进行3d转换并且呈现背面时候，不显示该元素。这样思路就来了，我们可以设置两个重叠的元素，一个在上方，并且设置背面不显示。当两个元素同时转动，前方元素因为背面不显示的原因（即180度后），会显示后面元素。再一个180度后，前方元素又开始显示了。这样看起来就像是一个元素转动到180后切换了一个元素一样。

话不多说，贴代码了。