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后切换了一个元素一样。

话不多说，贴代码了。

css：

img.center{display: block;position: absolute;width: 512px;height: 512px;left: 50%;top: 50%;margin-left: -256px;margin-top: -256px;}img.left{display: block;position: absolute;width: 256px;height: 256px;left: 50px;top: 50px;}.z_index{z-index: 5;}.turn_front{animation:front 6s linear infinite;backface-visibility: hidden;}.turn_back{animation:back 6s linear infinite}@keyframes front{0%{transform: rotateX(0deg);}30%{transform: rotateX(180deg);}70%{transform: rotateX(180deg);}100%{transform: rotateX(360deg);}}@keyframes back{0%{transform: rotateX(-180deg);}30%{transform: rotateX(0deg);}70%{transform: rotateX(0deg);}100%{transform: rotateX(180deg);}

}

html：

<img class="z_index left" src="../image/Microsoft_Office_front.png" id="front_img"><img class="left" src="../image/Microsoft_Office_back.png" id="back_img"><img class="z_index turn_front center" src="../image/Microsoft_Office_front.png"><img class="turn_back center" src="../image/Microsoft_Office_back.png"><button onclick="turn()">点我翻转</button>

js：

function turn() {var front_img = document.getElementById("front_img");var back_img = document.getElementById("back_img");front_img.classList.add("turn_front");back_img.classList.add("turn_back");setTimeout(function() {front_img.classList.remove("turn_front");back_img.classList.remove("turn_back");},6000);}

中间的图片一直循环转动，左方图片需要点击按钮执行一次转动。