## 通過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>
~~~
