昨天侃完了transform中的几个属性（缩放 scale、旋转 rotate、移动 translate）的基本使用方法,今天就让我们来一起看一下利用transform制作的动画特效吧。
今天，就以卡通小鸟旋转动画特效为例吧，希望大家喜欢，哈哈。
首先，我们先来div布局
<div class="bird">
<div class="big"></div>
<div class="middle"></div>
<div class="small"></div>
</div>
然后，添加css样式
*{margin:0; padding:0; list-style:none;}
body{
background:#27283b;
}
.bird{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
cursor:pointer;
}
.big{
position:absolute;
top:0;
left:0;
border-radius:50%;
border-color:transparent transparent #d72928 #db3e3d;
border-width:100px;
border-style:solid;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.middle{
position:absolute;
top:10%;
left:10%;
border-radius:50%;
border-color:#f8d245 transparent #f2f2f2 #fff;
border-style:solid;
border-width:80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
.small{
position:absolute;
top:30%;
left:30%;
border-radius:50%;
border-color:transparent #f7a703 transparent transparent;
border-style:solid;
border-width:40px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
}
最后，添加动画效果，让卡通小鸟动起来。
.bird{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
cursor:pointer;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
}
.big{
position:absolute;
top:0;
left:0;
border-radius:50%;
border-color:transparent transparent #d72928 #db3e3d;
border-width:100px;
border-style:solid;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.middle{
position:absolute;
top:10%;
left:10%;
border-radius:50%;
border-color:#f8d245 transparent #f2f2f2 #fff;
border-style:solid;
border-width:80px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small{
position:absolute;
top:30%;
left:30%;
border-radius:50%;
border-color:transparent #f7a703 transparent transparent;
border-style:solid;
border-width:40px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}
.small:before{
content:"";
background:#000;
width:20px;
height:20px;
border-radius:50%;
position:absolute;
top:-10px;
right:20px;
}
.bird:hover .big{
transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-moz-transform:rotate(225deg);
border-color:transparent transparent #1fe8b6 #16d7a7;
}
.bird:hover .middle{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
border-color:transparent #f8d245 #fff #f2f2f2;
}
.bird:hover .small{
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
border-color:transparent #f7a703 transparent transparent;;
}
卡通小鸟头像旋转动画特效这就大功告成了，喜欢的小伙伴们是不早已迫不及待的动手试一下了呢。