div#div2
{
display: table; width: 100%; height: 100%;
text-decoration: none;
outline: none;
-webkit-transition: all 800ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition: all 800ms ease-out;
transition: all 800ms ease-out;
}

div#div2:hover
{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

CSS3.0动画之hover---Y轴----3D旋转的更多相关文章

  1. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  2. Css3 笔记 动画 和定位属性

    transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...

  3. 学习 | css3基本动画之demo篇

    移动端使用的框架是zepto,但是zepto的内置对象没有传统的animate这个方法,效果都是需要css3来实现的,zepto也不支持fadeIn和fadeOut等一些基本的动画,基于这一现状,我自 ...

  4. echarts使用笔记四:双Y轴

    1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...

  5. Flash图表控件FusionCharts自定义图表y轴最大/最小值

    自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...

  6. Python教程:matplotlib 绘制双Y轴曲线图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...

  7. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  8. android3D动画,绕y轴旋转

    原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...

  9. 【巩固】CSS3的3D动画 ——3D旋转(1)

    最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...

随机推荐

  1. Javascript-XMLHttpRequest对象简介

        XMLHttpRequest是Ajax的核心,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果.   XMLHttp ...

  2. Cisco(思科)路由器静态路由的配置

    实验拓扑 实验步骤 我们要使得 1.1.1.0/24.2.2.2.0/24.3.3.3.0/24 网络之间能够互相通信. (1)  步骤 1:在各路由器上配置 IP 地址.保证直连链路的连通性 R1( ...

  3. 实例源码--Android小工具源码

      下载源码   技术要点: 1. Android控件布局的使用 2. Http通信 3. XML数据解析 4. 网络状态的监听 5. 源码带有非常详细的中文注释 ...... 详细介绍: 1. An ...

  4. c语言海量数据处理

    教你如何迅速秒杀掉:99%的海量数据处理面试题 http://wenku.baidu.com/view/4546d06ca45177232f60a276.html c语言如何对海量数据进行处理 PDF ...

  5. 电商ERP如何接入智选物流平台?

    智选物流是综合地址库+时效库+逻辑库(成本.订单属性.仓库)选择出最优快递,通过多家快递网点地址库精准数据,点对点的运输时间,各种行业包裹的所有快递价格逻辑,不同产品类型.支付方式等分析,实现不同仓库 ...

  6. Java基础知识强化103:Java常量池理解与总结

    一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...

  7. 阅读《RobHess的SIFT源码分析:综述》笔记2

    今天开始磕代码部分. part1: 1. sift特征提取. img1_Feat = cvCloneImage(img1);//复制图1,深拷贝,用来画特征点 img2_Feat = cvCloneI ...

  8. linux注销开关机

    注销:exit 重启:reboot shutdown-r 表示延时分钟数   关机:halt shut -h  

  9. linux命令行操作快捷键

    在shell命令终端中,Ctrl+n相当于方向向下的方向键,Ctrl+p相当于方向向上的方向键. 在命令终端中通过它们或者方向键可以实现对历史命令的快速查找.这也是快速输入命令的技巧. 在命令终端中可 ...

  10. 去掉VC2010 编辑器里出现的红色波浪线

    在VC2010中浏览代码的时候就大片的红线看着不舒服 其实不关VS的事,原因在于visual assist.   在VAssistX菜单栏->Visual Assist X Options-&g ...