css样式:

.div a img{
width: 88px;
height: 88px;
border-radius: 88px;
transition: all 1.2s ease-out 0s;
}
.div a img:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

html:

<div class="div">
<a href="#"><img src="data:images/logo.jpg"></a>
</div>

css3实现头像旋转360度的更多相关文章

  1. C# 图片旋转360度程序

    这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...

  2. css3实现头像旋转功能(超easy!!!)

    简单好玩的头像旋转功能 html结构 <body> <img src="https://a-ssl.duitang.com/uploads/item/201604/29/2 ...

  3. css3+jq--小箭头旋转180度案例

    html: <aside class="tea_getBtn"> <div class="w"> <span class=&quo ...

  4. transition过度效果 + transform旋转360度

    css样式: .animate{ width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font ...

  5. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  6. css3 向上淡入 小图标翻转 360度旋转

    代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...

  7. html5人物图片360度立体旋转

    体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...

  8. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  9. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

随机推荐

  1. sql中的group by 和 having 用法解析

    转载博客:http://www.cnblogs.com/wang-123/archive/2012/01/05/2312676.html --sql中的group by 用法解析:-- Group B ...

  2. 为Gem 添加环境设定

    如果在测试环境中 gem "rspec", :group => :test 当多个gem的时候 group :test do gem "webrat" g ...

  3. linux shell脚本中 mode=${1:-sart} filename=${fileuser:-"filename"}

    $1代表第二个参数m=${1:-start}表示如果$1存在且不为空,m就是$1如果$1不存在或为空,那么m就是start filename=${fileuser:-"filename&qu ...

  4. Packetbeat协议扩展开发教程（1）

    Packetbeat ( https://www.elastic.co/products/beats/packetbeat )是一个开源的网络抓包与分析框架,内置了很多常见的协议解析,如HTPP.My ...

  5. Thinkphp框架下设置session的过期时间

    打开项目中的配置文件,添加session的过期配置,如下: 'SESSION_OPTIONS' => array( 'name' => 'BJYSESSION', //设置session名 ...

  6. Linux 常用命令标记

    1.linux 服务器之间拷贝文件 scp 本地用户名@IP地址:文件名1 远程用户名@IP地址:文件名2 该命令可以变型为目的服务器204上输入如下命令:红色部分是需要接受目的地,-r是递归复制该文 ...

  7. Ucloud云主机无法yum安装处理办法

    Ucloud云主机在yum安装的时候出现这个提示 执行一下命令 yum --disablerepo=salttestyum-config-manager --disable salttestyum-c ...

  8. opencv学习笔记——时间计算函数getTickCount()和getTickFrequency()

    cv::getTickCount()可以用来测量一段代码的运行时间,这个函数返回从上次开机算起的时钟周期数. 由于我们需要的是某个代码段运行的毫秒数,因此还需要另一个函数cv::getTickFreq ...

  9. ubuntu16.04下安装ros-kinetic

    参考:http://wiki.ros.org/kinetic/Installation/Ubuntu 1.添加ROS软件源 ~$ sudo sh -c 'echo "deb http://p ...

  10. POJ 1066 - Treasure Hunt - [枚举+判断线段相交]

    题目链接:http://poj.org/problem?id=1066 Time Limit: 1000MS Memory Limit: 10000K Description Archeologist ...