由于沒法展示效果只是截了個圖

?

下面是實現代碼：

復制代碼代碼如下:

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

-moz-transition: all 0.8s ease-in-out;

-webkit-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

p#socialicons img:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

p#socialicons2 img:hover{

-moz-transform: rotate(70deg);

-webkit-transform: rotate(70deg);

-o-transform: rotate(70deg);

-ms-transform: rotate(70deg);

transform: rotate(70deg);

}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */

}

p#socialicons3 img:hover{

-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

-moz-transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

}

360度旋轉 onmouseover和onmouseout

60度旋轉 onMouseover and onMouseout

-360度旋轉 onMouseover

總結

以上是生活随笔為你收集整理的html旋转360度特效,CSS3图片旋转特效(360/60/-360度)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。