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. cocos2dx-3.2 环境配置

    一.软件 1)VS2012(C++11特性在VS2012以上可以使用) 2)Cocos2d-x官网源码 3)JDK 4)NDK(3.2要用r9d版本,用了android-ndk-r8e报错了) 5)A ...

  2. debian7安装oracle11g

    1,安装必须包 apt-get install gcc g++  make binutils libc6 libc6-dev libstdc++6 libstdc++5 rpm gawk alien ...

  3. string2array($value);

    /*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...

  4. Eclipse开发JQuery环境设置(Spket)

     http://www.cnblogs.com/sayo/archive/2008/10/20/1315528.html   首先需要安装Spket.可以参阅我的这篇文章进行Spket的安装. 之后进 ...

  5. Android进阶笔记11:ListView篇之ListView显示多种类型的条目(item)

    ListView可以显示多种类型的条目布局,这里写显示两种布局的情况,其他类似. 1. 这是MainActivity,MainActivity的布局就是一个ListView,太简单了这里就不写了,直接 ...

  6. oracle函数、包、变量的定义和使用、重点”结构体和数组”

    函数 实例1:输入雇员的姓名,返回该雇员的年薪 create function fun1(spName varchar2) ,); begin +nvl(comm,) into yearSal fro ...

  7. 魔方阵算法及C语言实现

    1 魔方阵概念 填充的,每一行.每一列.对角线之和均相等的方阵,阶数n = 3,4,5….魔方阵也称为幻方阵. 例如三阶魔方阵为: 魔方阵有什么的规律呢? 魔方阵分为奇幻方和偶幻方.而偶幻方又分为是4 ...

  8. 探讨PHP页面跳转几种实现技巧

    PHP被许多程序员用来开发WEB的首选语言.在实际开发中,网站的各项功能都可以通过PHP语言的编写来满足,比如PHP页面跳转这一方法. 探讨PHP变量解析顺序如何获取提交数据 深入解读PHP运行机制 ...

  9. Eclipse+Axis自动生成Web Service WSDL文件

    JDK版本:1.5.0_22 Eclipse版本:Helios Service Release 2(3.6.2) 首先创建一个web工程,创建过程如下: 如果选择Apache Tomcat v5.5, ...

  10. CF A and B and Compilation Errors (排序)

    A and B and Compilation Errors time limit per test 2 seconds memory limit per test 256 megabytes inp ...