## 通过transform，position,backface-visibility属性做出的小特效
### 特效1：两个大小一样内容不一样的背景来回翻转
~~~
<style>
.container{
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
}
.container>div{
/* transition: all 5s; */
position: absolute;
/*绝对定位后需要给定width和height*/
width: 300px;
height: 300px;
backface-visibility: hidden;/*div的背面正对着我们时隐藏起来*/
}
.front{
background: green;/*可添加背景图片*/
animation: tofront 3s infinite;/*动画名字 播放时的延迟时间 持续播放*/
}
.back{
background: grey;/*可添加背景图片*/
/* transform: rotateY(-180deg);此时正背对我们 */
animation: toback 3s infinite;/*动画名字 播放时的延迟时间 持续播放*/
}
@keyframes tofront{
0%{transform: rotateY(0deg)}
50%{transform: rotateY(180deg)}
100%{transform: rotateY(360deg)}
}
@keyframes toback{
0%{transform: rotateY(-180deg)}
50%{transform: rotateY(0deg)}
100%{transform: rotateY(180deg)}
}
</style>
<div class="container">
<div class="front"></div>
<div class="back"></div>
</div>
~~~
