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 ...
随机推荐
- XCode中调整字体大小
转自:http://www.cnblogs.com/mengshu-lbq/archive/2012/12/24/2830859.html 1)调出Xcode的preference应该是 Comman ...
- 小白日记5:kali渗透测试之被动信息收集(四)--theHarvester,metagoofil,meltag,个人专属密码字典--CUPP
1.theHarvester theHarvester是一个社会工程学工具,它通过搜索引擎.PGP服务器以及SHODAN数据库收集用户的email,子域名,主机,雇员名,开放端口和banner信息. ...
- JQuery EasyUI 之 DataGrid
1.动态创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: (1)页面上添加div标签 <div id=&qu ...
- 【Java Tips】boolean的类型与string类型的转换
boolean类型转化为string boolean b = true; String s = String.valueOf(b); System.out.println(s);
- Linux逻辑卷创建
1.创建PV物理卷 [root@localhost ~]# pvcreate /dev/sda4 /dev/sda5 /dev/sda6 /dev/sda7 Physical volume “/ ...
- Android 自学之网格试图(GridView)和图片切换器(ImageSwitcher)功能和用法
网格试图(GridView)用于在界面上按行,列分布的方式来显示多个组件. GridView和ListView有共同的父类:AbsListView,因此GridView和ListView具有一定的相似 ...
- [转]关于ASP.NET(C#)程序中TEXTBOX下动态DIV跟随[AJAX应用]
本文转自:http://blog.csdn.net/lolenboy/article/details/1665814 说明: 环境:ASPNET(c#),SQL2K 事例:TEXTBOX下跟随DIV, ...
- LeetCode 11
Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a poi ...
- LeetCode 292
Nim Game You are playing the following Nim Game with your friend: There is a heap of stones on the t ...
- Java从Jar文件中动态加载类
动态加载jar包,在实际开发中经常会需要用到,尤其涉及平台和业务的关系的时候,业务逻辑部分可以独立出去交给业务方管理,业务方只需要提供jar包,就能在平台上运行. 下面通过一个实例来直观演示: 第一: ...