CSS3.0动画之hover---Y轴----3D旋转
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旋转的更多相关文章
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- Css3 笔记 动画 和定位属性
transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...
- 学习 | css3基本动画之demo篇
移动端使用的框架是zepto,但是zepto的内置对象没有传统的animate这个方法,效果都是需要css3来实现的,zepto也不支持fadeIn和fadeOut等一些基本的动画,基于这一现状,我自 ...
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- Flash图表控件FusionCharts自定义图表y轴最大/最小值
自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...
- Python教程:matplotlib 绘制双Y轴曲线图
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- android3D动画,绕y轴旋转
原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...
- 【巩固】CSS3的3D动画 ——3D旋转(1)
最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...
随机推荐
- cocos2dx-3.2 环境配置
一.软件 1)VS2012(C++11特性在VS2012以上可以使用) 2)Cocos2d-x官网源码 3)JDK 4)NDK(3.2要用r9d版本,用了android-ndk-r8e报错了) 5)A ...
- debian7安装oracle11g
1,安装必须包 apt-get install gcc g++ make binutils libc6 libc6-dev libstdc++6 libstdc++5 rpm gawk alien ...
- string2array($value);
/*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...
- Eclipse开发JQuery环境设置(Spket)
http://www.cnblogs.com/sayo/archive/2008/10/20/1315528.html 首先需要安装Spket.可以参阅我的这篇文章进行Spket的安装. 之后进 ...
- Android进阶笔记11:ListView篇之ListView显示多种类型的条目(item)
ListView可以显示多种类型的条目布局,这里写显示两种布局的情况,其他类似. 1. 这是MainActivity,MainActivity的布局就是一个ListView,太简单了这里就不写了,直接 ...
- oracle函数、包、变量的定义和使用、重点”结构体和数组”
函数 实例1:输入雇员的姓名,返回该雇员的年薪 create function fun1(spName varchar2) ,); begin +nvl(comm,) into yearSal fro ...
- 魔方阵算法及C语言实现
1 魔方阵概念 填充的,每一行.每一列.对角线之和均相等的方阵,阶数n = 3,4,5….魔方阵也称为幻方阵. 例如三阶魔方阵为: 魔方阵有什么的规律呢? 魔方阵分为奇幻方和偶幻方.而偶幻方又分为是4 ...
- 探讨PHP页面跳转几种实现技巧
PHP被许多程序员用来开发WEB的首选语言.在实际开发中,网站的各项功能都可以通过PHP语言的编写来满足,比如PHP页面跳转这一方法. 探讨PHP变量解析顺序如何获取提交数据 深入解读PHP运行机制 ...
- Eclipse+Axis自动生成Web Service WSDL文件
JDK版本:1.5.0_22 Eclipse版本:Helios Service Release 2(3.6.2) 首先创建一个web工程,创建过程如下: 如果选择Apache Tomcat v5.5, ...
- 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 ...