纯Css3手工打造网页图片效果

1. 鼠标悬停，图片360度旋转

   
   效果：
   代码：

   <style>

           .rotate-demo {

               width: 220px;

               height: 220px;

               margin: 0 auto;

               background: no-repeat url("images/author.jpg") left top;

               -webkit-background-size: 220px 220px;

               -moz-background-size: 220px 220px;

               background-size: 220px 220px;

               -webkit-border-radius: 110px;

               border-radius: 110px;

               -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;

           }

               .rotate-demo:hover {

                   -webkit-transform: rotateZ(360deg);

                   -moz-transform: rotateZ(360deg);

                   -o-transform: rotateZ(360deg);

                   -ms-transform: rotateZ(360deg);

                   transform: rotateZ(360deg);

               }

       </style>

   <div class="rotate-demo"></div>