~~~
<style>
.parent{
perspective: 400px;
border:1px solid #333;
width:200px;
height:300px;
padding:10px;
}
.parent>div{
width:200px;
height:300px;
background-size: cover;
backface-visibility: hidden;
position:absolute;
}
.front{
z-index: 100;
background:url("images/01.png");
animation: front 3s infinite;
}
.back{
background:url("images/02.png");
animation: back 3s infinite;
}
@keyframes front {
0%{
transform: rotateY(0)
}
50%{
transform: rotateY(180deg)
}
100%{
transform: rotateY(360deg)
}
}
@keyframes back{
0%{
transform: rotateY(-180deg)
}
50%{
transform: rotateY(0deg)
}
100%{
transform: rotateY(180deg)
}
}
</style>
</head>
<body>
<div class="parent">
<div class="front">
</div>
<div class="back">
</div>
</div>
</body>
~~~
