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. mydumper原理4

    Mydumper是一个针对mysql和Drizzle的高性能多线程备份和恢复工具.开发人员分别来自MySQL,Facebook,SkySQL公司.目前已经在有一些大型产品业务上测试并使用了Mydump ...

  2. mysql 批量插入数据过多的解决方法

    使用场景: 测试时需要插入100w的数据,跑sql脚本插入非常慢. 存储过程如下: //DELIMITER DROP PROCEDURE if EXISTS createAmountCount; cr ...

  3. java_字符

    例一:数据类型转换 package javaweb1200; public class 字符就是数字吗 { public static void main(String[] args) { Syste ...

  4. Android录音--AudioRecord、MediaRecorder

    Android提供了两个API用于实现录音功能:android.media.AudioRecord.android.media.MediaRecorder. 网上有很多谈论这两个类的资料.现在大致总结 ...

  5. 炼数成金hadoop视频干货01

    视频地址:http://pan.baidu.com/s/1dDEgKwD 最开始还是讲hadoop的起源,但是和其他垃圾视频不同,不是照本宣科,听了还是受益.作者给人一种感觉就是他是确实把他的经验和体 ...

  6. Java用筛子法求素数

    描述现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度.如果左右有等距离长度素数,则输出左侧的值及相应距离.如果输入的整数本身就是素数,则输出该素数本身,距离输出0   ...

  7. Java中数组的快排

    描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据都是占一行,有三个字符组成, ...

  8. 给jdk写注释系列之jdk1.6容器(2)-LinkedList源码解析

    LinkedList是基于链表结构的一种List,在分析LinkedList源码前有必要对链表结构进行说明.   1.链表的概念      链表是由一系列非连续的节点组成的存储结构,简单分下类的话,链 ...

  9. LeetCode 345

    Reverse Vowels of a String Write a function that takes a string as input and reverse only the vowels ...

  10. hdu1501 动态规划

    这题有两种解题思路,一个是记忆化搜索,一个是dp. 分别贴代码: 记忆化搜索: #include<iostream> #include<cstdio> #include< ...