<!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. 【1】JMicro微服务-RPC体验

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl JMICRO运行简单服务提供者和消费者 1. 下载源代码 git checkout https://github.com/m ...

  2. string容器的简单实现

    1.业务使用main.cpp #include "pch.h" #include <iostream> int main() { mystring s1;//无参构造函 ...

  3. 调用ajax的返回值，需要再ajax之外的函数体里return，以及同步异步问题

    <html> <head> <meta charset="utf-8"/> <script src="js/jquery-1.1 ...

  4. windows jenkins 卸载

      如果下载的是war包,先在任务管理器上停止jenkins的服务,再删除jenkins整个文件

  5. thinkphp5.0 CURL用post请求接口数据

    //测试 请求接口 public function index(){ $arr = array('a'=>'555','b'=>56454564); $data=$this->pos ...

  6. 配置tomcat-users

    <role rolename="admin-gui"/><role rolename="admin-script"/><role ...

  7. eclipse 配置mapreduce环境出错

    初学mapreduce,想在eclipse上配置mapreduce的环境,网上之类的教程,很多但是按照教程配之后,并不能正常运行. 碰到下面的错误: 15/10/17 20:10:39 INFO jv ...

  8. 作为一个编程新手，我再也不怕Flink迷了我的眼！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由kyledong发表于云+社区专栏 使用 Flink 编写处理逻辑时,新手总是容易被林林总总的概念所混淆: 为什么 Flink 有那么 ...

  9. redis的数据类型(一) key操作

      redis是一个key-value形式的数据缓存,因此包括key和value. 一.key的说明 1.redis的key   Redis的key是字符串类型,但是key中不能包括边界字符,由于ke ...

  10. CentOS7手动修改系统时间

    CentOS7 永久修改系统时间 安装在虚拟机上的CentOS7的时间分为系统时间和硬件时间.二者都修改,重启系统(init 6 )才会永久生效.修改步骤如下 查看当前系统时间 date    修改当 ...