How to set up a circular rotating avatar in WordPress

A lot of web site reviewer's avatar are round, and when you move the mouse will rotate, then this how to achieve, I found a lot on the internet, but and my theme is not applicable, now put my revised code to paste out, as long as the following code to add to the STYLE.CSS. I've hacked a lot of code myself.

12345678910111213141516171819

/*头像旋转的效果*/.avatar{padding:1px;border:1px solid #cfd9e1;width:64px;height:64px; /*设置图像的宽和高，我设置的宽高都是64px,当然你可以根据你的主题自行修改*/border-radius: 100% !important;/*设置图像圆角效果,这里我为了和主题的代码冲突，更改了优先级*/-webkit-border-radius: 100% !important;/*圆角效果：兼容webkit浏览器*/-moz-border-radius:100% !important;/*圆角效果：兼容火狐浏览器*/box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/-webkit-box-shadow: inset 0 -1px 0 #3333sf;-webkit-transition: 0.4s;-webkit-transition: -webkit-transform 0.4s ease-out;transition: transform 0.4s ease-out;/*变化时间设置为0.4秒，这个时间也可以根据需要自行修改(变化动作即为下面的图像旋转720度）*/-moz-transition: -moz-transform 0.4s ease-out;}.avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);transform: rotateZ(720deg);/*图像旋转720度，这个旋转角度你也可以自己设置。*/-webkit-transform: rotateZ(720deg);-moz-transform: rotateZ(720deg); }

I started using the code provided on the Internet did not achieve a circular effect, only to achieve the effect of rotation, I suspect there may be subject code conflicts, so I changed the priority to succeed. Many of the problems are caused by code conflicts with the subject.
Here is the effect of the modification:

How to set up a circular rotating avatar in WordPress