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. python工具程序一、复制目录中指定扩展名的文件

    #!/usr/bin/env python # coding:utf-8 # xcopy Lib directory and rename all files to *d.lib import os ...

  2. WORD神操作!第一个技巧你就傻眼了!

    原文:http://mp.weixin.qq.com/s?__biz=MzA4NzkyMDIwNw==&mid=220128483&idx=4&sn=cfa87c941f36f ...

  3. 让 BAT 的 Offer 不再难拿

    随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得.由于我面试的都是比较大的公司,所以自然也是做了这方面的准备,因此这篇总结并不一定适合想去创业公司的同学.另 ...

  4. 为什么arcgis里,鼠标的图标都变成放大镜不能用了

    做作业做到一半,鼠标的图标就只有放大镜了,不管是点箭头还是作图工具都没用,手抓的也没用,只剩下放大镜的功能和图标了,这是怎么一回事啊?种情况我碰到过几次,具体原因不清楚,但是解决方法是有的:把你的数据 ...

  5. 乐在其中设计模式(C#) - 单例模式(Singleton Pattern)【转】

    介绍 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 示例 保证一个类仅有一个实例. Singleton using System; using System.Collections.Gene ...

  6. Xquartz远程访问linux

    实验环境:mac 操作系统:         OS X 10.9.4 Mavericksmac IP                      192.168.1.106XQuartz:       ...

  7. MySQL--INFORMATION_SCHEMA COLUMNS表

    在程序中,若想要动态地得到某一个表的具体信息,就使用到了MySQL 中的 INFORMATION_SCHEMA 信息数据库,而它又包含很多表,见下: INFORMATION_SCHEMA SCHEMA ...

  8. [改善Java代码]使用匿名类的构造函数

    建议39: 使用匿名类的构造函数 阅读如下代码,看看是否可以编译: public class Client { public static void main(String[] args) { Lis ...

  9. [改善Java代码]不要让四舍五入亏了一方

    建议25: 不要让四舍五入亏了一方 本建议还是来重温一个小学数学问题:四舍五入.四舍五入是一种近似精确的计算方法,在Java 5之前,我们一般是通过使用Math.round来获得指定精度的整数或小数的 ...

  10. Quartz Scheduler(2.2.1) - Usage of Calendars

    Quartz Calendar objects (not java.util.Calendar objects) can be associated with triggers at the time ...