<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1{

            width: 300px;

            height:300px;

            background-color: yellow;
　　　　　　　　/*弹性盒子设置垂直居中*/

            display: flex;

            align-items: center;

        }

        img{

            transition: all 1s ease;

        }

        img:hover{

            -webkit-transform: rotate(180deg);

            -moz-transform: rotate(180deg);

            -ms-transform: rotate(180deg);

            -o-transform: rotate(180deg);

            transform: rotate(180deg);

        }

    </style>

</head>

<body>

<div id="div1">

    <div style="margin: auto"><img src="../img/H5.png" alt=""></div>

</div>

<div id="div2"></div>

</body>

</html>

　　

02.CSS动画示例-->鼠标悬停图片旋转的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  5. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  6. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

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

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

  8. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  9. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

随机推荐

  1. 代码 | 自适应大邻域搜索系列之(4) - Solution定义和管理的代码实现解析

    前言 上一篇讲解了destroy和repair方法的具体实现代码,好多读者都在喊酸爽和得劲儿--今天这篇就讲点简单的,关于solution的定义和管理的代码实现,让大家回回神吧--哈哈. 01 总体概 ...

  2. jquery插件制作，下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  3. mongodb 两台互为主从

    主机A [root@mysql_master zhxf]# cat docker-compose.yml version: '3' services: mongo_rs1: image: mongo: ...

  4. CentOS7 安装 Visual Code

    官网下载 rpm 安装文件 运行 rpm -ivh 试一下 sudo rpm -ivh xxx.rpm 有可能弹出提出:libxx.so() need by xxxrpm ,反正意思是缺组件,去下载安 ...

  5. 关于Arduino串口读写HEX

    每次和硬件层进行调试的时候,就容易遇到数据格式问题.这不,继上次Matlab上的hex发送后,又遇到了Arduino上接收hex,并进行对比处理的问题.由于单片机级别的处理器只能以字节形式接收,因此无 ...

  6. Python 两种获取文件大小的方法

    import os r=os.path.getsize("/root/catbird1.stl") f=open("/root/catbird1.stl",&q ...

  7. ECharts概念学习系列之ECharts的下载和安装（图文详解）

    不多说,直接上干货! http://echarts.baidu.com/download.html 前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网 ...

  8. python笔记02-----字符串操作

    python中定义变量的字符串 str1 = "www"      #str1就是字符串了 一定用引号 或者直接使用"字符串."来调用内部的方法 1.字符串大小 ...

  9. 剑指offer(31-35)编程题

    整数中1出现的次数(从1到n整数中1出现的次数) 把数组排成最小的数 丑数 第一个只出现一次的字符位置 数组中的逆序 31.求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数 ...

  10. 12 Callable & Future & FutureTask

    创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需要获取执行结果,就必须通过共享变量或者使用 ...