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 ...
随机推荐
- UIDatePicker的时间选择器里的时区的问题
转自:http://www.cocoachina.com/bbs/simple/?t70445.html 初始化代码: - (void)viewDidLoad { [super viewDidLoad ...
- JavaScript eval() Function
Evaluate/Execute JavaScript code/expressions: Example var x = 10;var y = 20;var a = eval("x * y ...
- 循环语句until和while
一.until语句的基本格式 until 条件测试 do 语句块 done 只要条件测试语句未成功结束,则执行语句块.(如果一开始条件测试语句就成功退出,那么一次也不执行语句块.这里跟C语言中的do. ...
- 探索 Linux 内存模型--转
引用:http://www.ibm.com/developerworks/cn/linux/l-memmod/index.html 理解 Linux 使用的内存模型是从更大程度上掌握 Linux 设计 ...
- 渐进式jpeg(progressive jpeg)图片及其相关 --图片的两种加载方式
渐进式jpeg(progressive jpeg)图片及其相关 一.基本JPEG(baseline jpeg)和渐进JPEG 网络上那些色色的照片都是.jpg格式的("色色"指 ...
- iOS之内购
很久之前就想出一篇IOS内付费的教程,但是一查网上的教程实在太多了,有的写得真的蛮不错的,就心想算了,于是就保存在草稿箱了.至于为什么写完它呢!真是说来话长,最近公司有个项目经理跑来问我有关苹果内付费 ...
- [课程相关]homework-07
我读的博客: C++11中值得关注的几大变化 C++11 中的线程.锁和条件变量 C++开发者都应该使用的10个C++11特性 开始使用C++11的9个理由 我的问题: 1.有一句话:“C++像难懂的 ...
- 【优先队列】【最近连STL都写不出来了/(ㄒoㄒ)/~~】hdu_5360/多校#6_1008
题意:就是让你写出一个邀请朋友的顺序,朋友答应一起出去玩的条件是除他以外所有同意出去玩的人数要在[ l[i], r[i] ]范围内,否则他就不答应. 分析:这题比赛的时候想麻烦了,其实只要在左边界满足 ...
- 【转】创业C2C(Copy To China):停车位共享APP,用户、市政能够买账?
如果周六中午想开车到旧金山的Mission吃顿早午餐,笔者劝您还是省省吧.因为不光是到了吃饭的地儿排队得耗上一个小时,就是满大街的兜圈子找停车位都能折腾死人.那个时候您或许就明白了,其实最苦的并不是买 ...
- 解决c#,wpf程序带环境安装包体积太大问题
在.net开发客户端的时候,一定会遇到用户没有安装.net环境的问题,特别是现在win7,win8,win10多系统并用的时间段,很多开发者使用的是4.5的目标环境,用户却是使用win7的系统,这样势 ...