注意事项:
1.使用transform:rotateY(180deg)让纸牌旋转180度。
2.在使用transform:translateZ之前要给父级开启3d效果(transform-style:preserve-3d)。
3.给父级开启3d后，必须加入景深perspective:500-800px;
下面是两个纸牌翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻纸牌</title>
<style>
.menu,.menu1{
height: 460px;
width: 290px;
margin:30px auto;
position: relative;
perspective:600px;
float: left;
margin-left: 20%;
}
.box,.f,.z,.f1,.z1{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 2s;
}
.box{
transform-style: preserve-3d;
border-radius: 6px;
text-align: center;
line-height: 460px;
color:blue;
font-size: 28px;
font-weight: bold;
text-shadow: 0 1px 3px #fff;
}
.f,.f1{
border-radius: 6px;
}
.z,.z1{
border-radius: 6px;
transform: rotateY(180deg);
transform: translateZ(1px);
}
.z{
background: url(3.jpg) center center / cover no-repeat;
}
.z1{
background: url(3.jpg) center center / cover no-repeat;
}
.f{
background: url(1.jpg) center center / cover no-repeat;
transform: rotateY(180deg);
}
.f1{
background: url(2.jpg) center center / cover no-repeat;
transform: rotateY(180deg);
}
.menu .box:hover{
transform: rotateY(180deg);
}
.menu1 .box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="menu">
<div class="box">
<div class="z"></div>
<div class="f">谢谢参与</div>
</div>
</div>
<div class="menu1">
<div class="box">
<div class="z1"></div>
<div class="f1">一等奖：饺子一锅</div>
</div>
</div>
</body>
</html>效果如下图：
下面是一个纸牌翻转：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>景深练习</title>
<style>
.menu{
height: 460px;
width: 290px;
margin:30px auto;
position: relative;
perspective:600px;/*景深*/
}
.box,.f,.z{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 2s;
}
.box{
transform-style: preserve-3d;
border-radius: 6px;
}
.f{
background: url(1.jpg) center center / cover no-repeat;
border-radius: 6px;
transform: rotateY(180deg);
}
.z{
background: url(3.jpg) center center / cover no-repeat;
border-radius: 6px;
transform: translateZ(1px);
}
.menu .box:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="menu">
<div class="box">
<div class="z"></div>
<div class="f"></div>
</div>
</div>
</body>
</html>结果如下图：
当鼠标划过时反转：
