~~~
<style>
.container{
width: 300px;
height: 300px;;
margin:100px auto;
position: relative;
}
.container>div{
transition: all 2s;
position: absolute;
height: 300px;
width:300px;
backface-visibility: hidden;
}
.front{
background: plum;
animation: toback 2s infinite;/*自动重复动画 */
}
/* .back{
transform: rotateY(-180deg);
}
.container:hover .front{
transform: rotateY(180deg);
}
.container:hover .back{
transform: rotateY(0deg);
} */
.back{
height: 300px;
background: pink;
animation: tofront 2s infinite;/*自动重复动画 */
}
@keyframes toback{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(360deg);}
}
@keyframes tofront{
0%{transform: rotateY(-180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}
</style>
~~~
~~~
<body>
<div class="container">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
~~~
效果图如下：
