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

最新推荐文章于 2025-06-28 17:06:15 发布

爱打球的程序猿

最新推荐文章于 2025-06-28 17:06:15 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013994112/article/details/52401832

本文介绍了如何使用CSS3动画实现两个元素的翻转与切换效果，以解决在表格信息提示中避免多层提示的问题。通过设置3D转换的backface-visibility属性，使得元素在翻转180度后可以实现内容的切换，同时提供了相关的CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天开发项目时，表格信息填写下方会有提示行，为蓝色背景。提交表格数据时候，如果有错误提示，会在提示行上方，背景红色。但是两层提示会显得很碍眼，所以自己想法是如果有错误提示，直接翻转提示行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);
			}

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