原创内容，转载请注明出处：https://www.myzhenai.com.cn/post/3280.html
关键字：css效果 鼠标悬停 图片转动

这个教程我是参考网上的一个方法修改的，原本是想给我儿子的博客弄个动态的头像，后面觉得很好玩，于是我便又折腾着给我的两个博客所有首页图片都添加了这个功能，我使用的方法见我别一个文章。

这个方法的重点在于找到对应的规则，然后需要为该规则设置一些内容和添加一个hover悬停事件。

JiaYu Blog演示：https://jiayu.mybabya.com/
WordPress模板Diy记录：https://www.myzhenai.com.cn/post/3266.html
WordPress鼠标悬停变色的修改方法：https://www.myzhenai.com.cn/post/3253.html

网上原文

.mydiv{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin: 0 auto;
    background: no-repeat url(https://jiayu.mybabya.com/wp-content/uploads/2012/07/IMGSRC_20121125033520.jpg) left top;
    -webkit-background-size: 150px 150px;
    -moz-background-size: 150px 150px;
    background-size: 150px 150px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
       }
.mydiv:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

mybabya

.format-gallery .size-thumbnail img,
.category-gallery .size-thumbnail img {
    border: 10px solid #f1f1f1;
    margin-bottom: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
    background: no-repeat left top;
    -webkit-background-size: 150px 150px;
    -moz-background-size: 150px 150px;
    background-size: 150px 150px;
    -webkit-border-radius: 90px;
    border-radius: 90px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.format-gallery .size-thumbnail img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

myzhenai

.article-container article .feat-img a img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: no-repeat left top;
  -webkit-background-size: 150px 150px;
  -moz-background-size: 150px 150px;
  background-size: 150px 150px;
  -webkit-border-radius: 90px;
  border-radius: 90px;
  -webkit-transition: -webkit-transform 2s ease-out;
  -moz-transition: -moz-transform 2s ease-out;
  -o-transition: -o-transform 2s ease-out;
  -ms-transition: -ms-transform 2s ease-out;
}
.article-container article .feat-img a img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

#slider .slide .book-cover img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0 auto;
  background: no-repeat left top;
  -webkit-background-size: 150px 150px;
  -moz-background-size: 150px 150px;
  background-size: 150px 150px;
  -webkit-border-radius: 90px;
  border-radius: 90px;
  -webkit-transition: -webkit-transform 2s ease-out;
  -moz-transition: -moz-transform 2s ease-out;
  -o-transition: -o-transform 2s ease-out;
  -ms-transition: -ms-transform 2s ease-out;
}
#slider .slide .book-cover img:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -o-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}