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