[分享] 分享一个让帖内投像360度旋转的代码

Yenifer

1. <style>
   
2. #viewthread .avatar img{
   
3. width:100px;
   
4. height:100px;
   
5. transition:width 2s, height 2s;
   
6. -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
   
7. -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
   
8. -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
   
9. }
   
10. 
    
11. #viewthread .avatar img:hover
    
12. {
    
13. width:100px;
    
14. height:100px;
    
15. transform:rotate(180deg);
    
16. -moz-transform:rotate(360deg); /* Firefox 4 */
    
17. -webkit-transform:rotate(360deg); /* Safari and Chrome */
    
18. -o-transform:rotate(360deg); /* Opera */
    
19. }
    
20. </style>

複製代碼

头部或者第三方

恒小杰

感谢分享

Kajes

用户组头的话,可以直接兩個刪了
Width:100px;
Height100px;
然後头像大小就不用改了 ^^

1. <style>
   
2. #viewthread .avatar img{
   
3. transition:width 2s, height 2s;
   
4. -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
   
5. -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
   
6. -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
   
7. }
   
8. 
   
9. #viewthread .avatar img:hover
   
10. {
    
11. transform:rotate(180deg);
    
12. -moz-transform:rotate(360deg); /* Firefox 4 */
    
13. -webkit-transform:rotate(360deg); /* Safari and Chrome */
    
14. -o-transform:rotate(360deg); /* Opera */
    
15. }
    
16. </style>

複製代碼

xiangzi8821

前排支持！
代码这东西，追求完美是很累的事。
喜欢研究，懂得分享才是最赞的。
资源贴，无条件支持！

sf2tmakss

感謝大大的分享~

章鱼

回復 7# Yenifer


   
是的,这个东西很令人头疼,导致要改头像大小等等必须用极其麻烦的方法来做......

Yenifer

回復 3# 章鱼


    你说的那个用户组头像我还真没测试

不过代码与代码之间不都是存在着一点点相互排斥的么，只能二选一咯

pigeon

章鱼博学多才。

憨憨兒

謝謝教學

superman1024

給樓主頂一下唷