CSS3 3D翻转卡片动画
程序员文章站
2022-04-27 18:37:50
...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>H5 3D翻转卡片动画</title>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
.flip{transform:translate3d(0,0,0); margin: 40px;}
.flip-box{
position: relative;
width: 110px;
height: 140px;
overflow: hidden;
}
.flip-item{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition:all .5s ease-in-out;
transform-style:preserve-3d;
backface-visibility:hidden;
border: 1px solid #ddd;
box-sizing: border-box;
}
.flip-item img{
width: 70px;
height: 70px;
border-radius: 100%;
margin: 32px auto;
display: block;
}
.flip-item-text{
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
text-align: center;
color: #333;
}
.flip-item-front{
transform:rotateY(0deg);
z-index: 2;
background: #fff;
}
.flip-item-back{
transform:rotateY(180deg);
z-index: 1;
background: #009fff;
}
.flip-item-back .flip-item-text{
color: #fff;
}
.flip-box:hover .flip-item-front{
z-index: 1;
transform: rotateY(180deg);
}
.flip-box:hover .flip-item-back{
z-index: 2;
transform: rotateY(0deg);
}
.flip-item-bling{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background: url(animation.png) center no-repeat;
z-index: -1;
}
.flip-box:hover .flip-item-bling{
transform: translate3d(0,0,0);
animation: rotate infinite 10s linear;
}
@keyframes rotate{
0% {
transform-origin: center;
transform: rotate3d(0,0,1,0deg);
}
100%{
transform-origin: center;
transform: rotate3d(0,0,1,360deg);
}
}
</style>
</head>
<body>
<div class="flip">
<div class="flip-box">
<a href="###" class="flip-item flip-item-front">
<img src="bbb.jpg" alt="">
<span class="flip-item-text">一站式共享网络</span>
</a>
<a href="###" class="flip-item flip-item-back">
<div class="flip-item-bling"></div>
<img src="aaa.jpg" alt="">
<span class="flip-item-text">onestopweb</span>
</a>
</div>
</div>
</body>
</html>
效果图：
