wordpress 头像旋转特效

摘要

可以使用css3实现wordpress 头像旋转特效，今天正好给博客添加上了这个效果，记录一下。

可以使用css3实现wordpress 头像旋转特效，今天正好给博客添加上了这个效果，记录一下。

旋转CSS：

@keyframes myfirst {     from {       transform:rotateY(0deg);      -webkit-transform:rotateY(0deg);     }     to {  transform: rotate(360deg);  -webkit-transform: rotate(360deg);     } }   @-webkit-keyframes myfirst  {    from {       transform:rotateY(0deg);      -webkit-transform:rotateY(0deg);     }     to {  transform: rotate(360deg);  -webkit-transform: rotate(360deg)     } } 

然后在头像的class属性里加上：

animation: myfirst 4s infinite; -webkit-animation: myfirst 4s infinite;  

说明：

如果想要上下翻滚便将如下代码替换：

transform: rotate(360deg); -webkit-transform: rotate(360deg); 替换为 transform:rotateY(360deg); -webkit-transform:rotateY(360deg); 

animation: myfirst 4s infinite;  //4s表示时间，infinite表示一直，如果只想打开时特效一次，那么便删除infinite -webkit-animation: myfirst 4s infinite;