<!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. STM32-RS232通信软硬件实现

    OS:Windows 64 Development kit:MDK5.14 IDE:UV4 MCU:STM32F103C8T6/VET6 AD:Altium Designer 18.0.12 1.RS ...

  2. keycloak ssl-required报错问题处理

       两台主机,网段不同,第一台129.30.108.179/24    第二台172.16.160.92/24 都安装keycloak :    docker run -d --name keycl ...

  3. bash: wget: command not found

    有些VPS执行wget命令下载时,提示-bash: wget: command not found错误,其实这是由于系统中没有安装wget,我们只要执行安装命令安装即可. yum -y install ...

  4. Tomcat和Mysql部署成Windows服务

    如题: Tomcat部署进入到Tomcat的bin目录,执行命令:service.bat install  [service_name]安装完毕后服务中能看见Apache Tomcat 7.0 [se ...

  5. VUE源代码调试方法

    前两条出自: https://link.zhihu.com/?target=http%3A//www.orzzone.com/vuejs-project-debug.html https://www. ...

  6. FileRecv VNCViewer 使用方法

    版本 区别 一路点点点 . 就ok了 看到这个页面 点击   vnc viewer 输入 老师 会告诉你 IP地址  点击 就ok

  7. 【Three.js】模型抗锯齿处理

    1.锯齿消除方法 three.js参考使用官方demo发现模型渲染有锯齿,这种情况在旋转视角时候就非常明显. 抗锯齿的方法,很简单,只需要配置render两个属性即可: renderer = new ...

  8. 【Three.js】实现随心所欲的展示外部三维模型

    1.概要 最近学习Three.js,尝试加载一些3d max导出的obj.stl模型,在展示模型的时候遇到了一些问题,模型的尺寸.位置和旋转角度每次都靠手工调整,非常的不方便,就想着写一个方法来随心所 ...

  9. C# TCPClient简单示例

    示例使用方法参考 示例 以下一个简单的异步事件TCP客户端实现 using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; usi ...

  10. Mac下使用Eclipse的Show in Terminal提示command not found: mvn

    在Mac下一般配置了Maven的环境变了一般都不会提示,但是如果使用zsh的扩展之后,系统默认的环境变量配置文件会发生变化,尤其使用Eclipse打开终端时,默认不会去读取用户目录下的~/.bashr ...