<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.net/" />

<title>拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）</title>

<style type="text/css">

.feature-box-image {

  margin:  auto 1em auto;

  width: 120px;

  height: 107px;

  overflow: hidden;

}

.cross-browser .feature-box-image{

    background: url('http://www.iicoo.cn/demo/html5/feature-sprites.png') -278px 0px no-repeat;

    transition: all .4s;

    position: relative;

    z-index: ;

}

.cross-browser .feature-box-image:hover {

    transition: all .7s;

    -webkit-transform: rotate(.28rad);

    -ms-transform: rotate(.28rad);

    transform: rotate(.28rad);

}

</style>

<script type="text/javascript">

 //

</script>

</head>

<body>

    <div class="feature-box cross-browser">

            <div class="feature-box-image"></div>

        </div>

</body>

</html>

拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）的更多相关文章

  1. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  2. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  3. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  4. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  5. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  6. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  7. CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  8. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  9. AndroidUI 视图动画-旋转动画效果 （RotateAnimation）

    RotateAnimation,能实现Android的视图的旋转效果,废话不多说直接上代码. 新建一个Android 项目,在activity_main.xml中添加一个按钮,然后使用Relative ...

随机推荐

  1. 关于jquery中 跳出each循环的方法

    最近在项目中用带了jquery,在使用each循环遍历时在满足一定条件就跳出,发现break不好使,最终原来 用 return false;便可解决.

  2. 虚拟机CentOS-mini安装完成后的网络设置

    系统环境:虚拟机, CentOS-mini,x86-64, 1. 主机名设置 涉及的文件: /etc/hostname;  /etc/sysconfig/network 1.1 在/etc/hostn ...

  3. 差分约束系统 POJ 3169 Layout

    题目传送门 题意:有两种关系,n牛按照序号排列,A1到B1的距离不超过C1, A2到B2的距离不小于C2,问1到n的距离最大是多少.如果无限的话是-2, 如果无解是-1 分析:第一种可以写这样的方程: ...

  4. linux ubuntu的root密码

    安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码.我们可 ...

  5. Android Drawable

    1. Shape 属性: (1) solid ( 填充 ) 参数:android:color ( 填充的颜色 ) (2) gradient ( 渐变 ) 参数:android:startColor ( ...

  6. ACM zb的生日

    zb的生日 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么 ...

  7. ACM 推桌子

    推桌子 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 The famous ACM (Advanced Computer Maker) Company has re ...

  8. ios retain 与 copy 的区别

    .retain 与copy区别 retain 的仅仅是引用计数加1,但是并没有创建新的对象.它们的指针是指向相同的内存地址. copy 是创建一个新的对象作为原来对象的副本,新创建出来的引用计数并没有 ...

  9. 【BZOJ】2286: [Sdoi2011消耗战

    http://www.lydsy.com/JudgeOnline/problem.php?id=2286 题意:n个点的边加权树,m个询问,每次询问给出的k个点与结点1分离的最小代价.(n<=2 ...

  10. BZOJ1443: [JSOI2009]游戏Game

    如果没有不能走的格子的话,和BZOJ2463一样,直接判断是否能二分图匹配 现在有了一些不能走的格子 黑白染色后求出最大匹配 如果是完备匹配,则无论如何后手都能转移到1*2的另一端,故先手必输 否则的 ...