效果预览:http://hovertree.com/code/run/css/x8l6si70.html

请实用Chrome浏览器查看效果,手机上也可以.

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>CSS3正方形翻转动画 - 何问起</title>

    <meta charset="utf-8" />

    <style>

.hewenqicube--ani {

  -webkit-animation: rot 4s linear infinite;

}

@-webkit-keyframes rot {

  to {  -webkit-transform: rotateY(-330deg) rotateX(370deg); }

}

.hewenqicube{border:darkgreen solid 2px;width:200px;height:200px;background-color:silver;}

#hovertreecom{width:400px;margin:10px auto;}

    </style>

</head>

<body>

    <div id="hovertreecom">

        <h2>CSS3正方形翻转动画 by 何问起</h2>

        <div class='hewenqicube hewenqicube--ani'>

            正方形翻转动画，请使用Chrome浏览器 。 http://hovertree.com

            <a href="http://hovertree.com">何问起</a>

        </div>

    </div>

</body>

</html>

转自:http://hovertree.com/code/css/x8l6si70.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

Chrome立体动画代码的更多相关文章

  1. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  2. 如何用chrome修改js代码，跳过网站等待时间

    用chrome修改js代码 By Z.H. Fu 切问录 [maplewizard.github.io](http://maplewizard.github.io ) 网页中大部分的限制都是由js编写 ...

  3. 加入收藏夹的js代码(求兼容chrome浏览器的代码)

    从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...

  4. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  5. Google Chrome调试js代码,开发者工具之调试工具常用功能

    参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...

  6. IOS 制作动画代码和 设置控件透明度

    方式1: //animateWithDuration用1秒钟的时间,执行代码 [UIView animateWithDuration:1.0 animations:^{ //存放需要执行的动画代码 s ...

  7. android动画(3)layout动画,layoutChanged动画及算定义它,ListViewActivity的Layout动画(代码和xm配置两种实现l)

    1.layout切换动画 代码: 本示例是fragment切换.在它的oncreateView中 public class LayoutAnimationFrgmt extends Fragment ...

  8. QuartzCode快速开发动画代码工具

    QuartzCode快速开发动画代码工具 QuartzCode一款快速,轻量,强大的动画工具,可快速得到原生的ObjC/Siwft代码 我可以用QuartzCode做什么? 应用程序演练动画 动画菜单 ...

  9. Chrome 下动画卡顿问题的另一种可能

    [现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...

随机推荐

  1. 简化 Web 应用程序与 Windows Azure Active Directory、ASP.NET 和 Visual Studio 的集成

    大家好! 今天的博文深入讨论我们今天推出的开发人员工具和框架中的一些新功能.我们通过与 ASP.NET 和 Visual Studio 团队合作开发了一些重大的增强功能,让开发人员能够轻松使用 Win ...

  2. 领域驱动设计（DDD）部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  3. 负载均衡session会话保持方法

    负载均衡时,为了保证同一用户session会被分配到同一台服务器上,可以使用以下方法:1.使用cookie将用户的session存入cookie里,当用户分配到不同的服务器时,先判断服务器是否存在该用 ...

  4. 使用批处理设置JDK环境变量（Win7可用，新版本）

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处http://www.cnblogs.com/nullzx/ 1. JDK环境的设置 一般情况下来说按照网上大多数的教程设置JDK的环境变量即可.但对于 ...

  5. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  6. Linux中grep搜索用法

    有测试文件test.txt一枚,内容如下 aaabbbcccAAADDDEEEabcsdfjasldjfbcdokmABC 一.基本搜索常用1.现在想把abc okm筛选出来 grep "a ...

  7. 在Package中处理 bit column

    SQL Server没有boolean类型,使用bit 类型来代替,bit类型有两个值:0 和 1. SSIS package中有boolean类型,SSIS自动将bit 类型转换成boolean类型 ...

  8. 解密jQuery内核 DOM操作的核心buildFragment

    文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...

  9. Android 裁剪图片为圆形图片

    转自http://blog.csdn.net/kkmike999/article/details/16359713 /** * 转换图片成圆形 * * @param bitmap * 传入Bitmap ...

  10. 4、解析配置文件 redis.conf、Redis持久化RDB、Redis的主从复制

    1.Units单位 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 对大小写不敏感 2.INCLUDES包含 和我们的Struts2配置文件类似,可以通过includes包 ...