素材仅展示,自行修改
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.show{
perspective: 800px;
}
.cards{
transform-style: preserve-3d;
animation: go3d 10s infinite;
}
.card{
width: 150px;
position: absolute;
}
.card:nth-child(2){
transform: rotateY(360deg);
}
.card>img{
width: 100%;
}
@keyframes go3d{
100%{transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="show">
<div class="cards">
<div class="card">
<img src="img/a3.jpg" alt="">
</div>
<div class="card">
<img src="img/a2.jpg" alt="">
</div>
</div>
</body>
</html>
效果如下:
其会进行设定好的动画进行运动。