【CSS3 DEMO】扑克正反面翻牌效果-优快云博客

本文展示了如何使用CSS3的动画时间属性和3D transform功能，通过简单的HTML和CSS代码实现了一个在线预览的3D旋转效果。通过设置transition-duration和transform属性，可以创建平滑的动画效果，使元素从一个状态过渡到另一个状态，例如从正面显示到背面显示。代码示例中包括了多个实例，展示了如何应用这些属性来改变图像的显示方式。

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

在线预览地址：http://dtdxrk.github.io/game/css3-demo/drawbox.html

用到两个属性：

一个是动画时间

transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;

一个是3d

transform: rotate3d(0,1,0,-180deg);
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0; padding:0;}

	.drawbox{width: 200px;height: 200px; position: relative;-webkit-perspective:500px; }
	.drawbox-front, .drawbox-behand{ position: absolute;top:0;left:0;z-index: 0;-webkit-transition-duration: 0.8s;-webkit-transform: rotate3d(0,1,0,180deg);}
	.drawbox-front{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
	.drawbox:hover .drawbox-front{z-index: 0;-webkit-transform: rotate3d(0,1,0,-180deg);}
	.drawbox:hover .drawbox-behand{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
	</style>
</head>
<body>
	<div class="drawbox">
		<div class="drawbox-front"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504141931123924435110.jpg" alt=""></div>
		<div class="drawbox-behand"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504142232044255132110.jpg" alt=""></div>
	</div>


	<div class="drawbox">
	    <div class="drawbox-front"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201501/cnmo200180_03_0107.jpg" alt="" border="0"></div>
	    <div class="drawbox-behand"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201412/ZET2486hp200180news_1224.gif" alt="" border="0"></div>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/dtdxrk/p/4218098.html