## 通過transform屬性做出的一些小特效
### 特效1：
鼠標放上去后一個和圖片大小的正方形沿著右下角逆時針旋轉90°
:-: 
~~~
<style>
.box{
margin: 100px 0 80px 300px;
width: 72px;
height: 72px;
position: relative;
overflow: hidden;
}
.bg-img{
height: 72px;
height: 72px;
background: #f1f1f1;/*可添加背景圖片*/
}
.cover{
width: 72px;
height: 72px;
position: absolute;
left: 0;
top: 0;
background: rgba(25, 25, 25,0.7);/*可對遮擋層顏色進行調整*/
transform: rotate(90deg);
transition: all 1s;/*hove觸發到結束使用的時間*/
transform-origin: right bottom;/*以右下角為中心軸進行旋轉*/
}
.box:hover .cover{
transform: rotate(0deg);
}
</style>
<div class="box">
<div class="bg-img"></div>
<div class="cover"></div>
</div>
~~~
* * * * *
### 特效2：
鼠標放上去后一個慢慢變大的正方形從左上角旋轉著鋪滿了整個圖形
~~~
<style>
.master{
width: 100px;
height: 100px;
background: #f1f1f1;/*可設背景圖片*/
position: relative;
overflow: hidden;
}
.master_cover{
top: 0;left: 0;
width: 0;
height: 0;
background: rgba(40, 40, 40, 0.6);/*可對背景顏色進行調整*/
position: absolute;
transition: all 2s;
transform: rotate(180deg);
transform-origin: 50% 50%;/*以中心為軸進行旋轉*/
}
.master:hover .master_cover{
width: 100px;
height: 100px;
transform: rotate(0deg);
}
</style>
<div class="master">
<div class="master_cover"></div>
</div>
~~~
