<!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. Tomcat 基础优化

    作者:北京运维 本文档是身边一些朋友.技术大佬之前分享的一些笔记,记录了 Tomcat 优化方法,笔记较多而且比较杂乱,经过整理.分类我个人觉得大致可以从以下几个方面优化 Tomcat: Tomcat ...

  2. 编程开发之--java多线程学习总结（2）同步代码块

    1.第一种解决办法:同步代码块,关键字synchronized package com.lfy.ThreadsSynchronize; /** * 1.使用同步代码块 * 语法: synchroniz ...

  3. JMeter知识点整理

  4. 新创建的数据库，执行db2look时，遇到package db2lkfun.bnd bind failed

    在新创建的数据库中,执行db2look的时候,存在这样的问题 db2v97i1@oc0644314035 ~]$ db2look -d sample -e -l -o db2look.ddl -- N ...

  5. PHP操作sqlserver乱码解决

    将捕获的参数编码转换为GB2312即可 function ($string){ returen iconv("UFT-8","GB2312//IGNORE",$ ...

  6. display:block、inline、inline-block的区别及应用案例

    A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...

  7. Ubuntu系统Java开发环境的搭建

    操作系统:Linux x64 / Ubuntu 14.04 Java JDK版本:jdk-8u65-linux-x64.tar.gz 声明:转载请注明出处及本文链接 本文原文地址:Ubuntu系统Ja ...

  8. 安卓加固之so文件加固

    一.前言 最近在学习安卓加固方面的知识,看到了jiangwei212的博客,其中有对so文件加固的两篇文章通过节加密函数和通过hash段找到函数地址直接加密函数,感觉写的特别好,然后自己动手实践探索s ...

  9. Greenplum表定义

    GP中的table和其它关系型数据表是一样的,除了数据被分布在不同的segment以外. 在建表的时候必须申明分布键distribution policy. 建表需定义下面几个方面: 1. 指定列和数 ...

  10. oracle 如何查看已经创建好的触发器语句-select trigger_body from user_triggers where trigger_name='XXXX';

    使用trigge_body查询, select trigger_body from user_triggers where trigger_name='XXXX'; 如下图: SQL> sele ...