效果图如下
代码如下：（复制保存为.html可直接看效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3—3D翻转</title>
</head>
<style>
.container{
perspective: 400px;
transform-style: preserve-3d;
width: 150px;
height: 80px;
margin: 10px auto;
}
.box{
width: 150px;
height: 80px;
margin: 10px auto;
backface-visibility: hidden;
transition: 2s;
transform-style: preserve-3d;
position: absolute;
text-align: center;
}
.box1{background-color: rgba(255,0,0,0.5);transform: rotateX(0deg) scale(1,1);}
.box2{background-color: rgba(0,255,0,0.5);transform: rotateX(-180deg) scale(0.5,0.5);}
.container:hover .box1{transform: rotateX(180deg) scale(0.5,0.5);}
.container:hover .box2{transform: rotateX(0deg) scale(1,1);}
</style>
</head>
<body>
<div class="container">
<div class="box box1">
<span>front</span>
</div>
<div class="box box2">
<span>back</span>
</div>
</div>
</body>
</html>
参考博文：https://blog.csdn.net/a772116804/article/details/79551753
1278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
