效果预览: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. IIS Community Newsletter June 2013

    Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...

  2. Hadoop学习笔记—15.HBase框架学习（基础实践篇）

    一.HBase的安装配置 1.1 伪分布模式安装 伪分布模式安装即在一台计算机上部署HBase的各个角色,HMaster.HRegionServer以及ZooKeeper都在一台计算机上来模拟. 首先 ...

  3. MySQL 复制表结构

    200 ? "200px" : this.width)!important;} --> 介绍 有时候我们需要原封不动的复制一张表的表结构来生成一张新表,MYSQL提供了两种便 ...

  4. AngularJs项目文件以及文件夹结构

    app/ ----- Libs/ // references for all libs ---------- angular.js ---------- angular-route.js ----- ...

  5. crossplatfrom---electron入门教程

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  6. 关闭form上chrome的autofill

    Chrome的autofill会自动找到form中的type=password的元素,然后把这个元素前面的元素当做是用户名,它不在乎这个元素叫什么名字.这样又是注册又是登录,你会发现它自作聪明的aut ...

  7. 深入理解DOM节点类型第三篇——注释节点和文档类型节点

    × 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...

  8. java使用Executor（执行器）管理线程

    一.一个实现了Runnable接口的类 class MyThread implements Runnable{ private static int num = 0; @Override public ...

  9. Windws Server 2008 R2 WEB环境配置之MYSQL 5.6.22安装配置

    版本选择 因为MySql的版本越来越多,而作为中小网站者可能没有足够的经济去购买商业版本,所以一般选择免费版,而且功能也是足够使用的. 有钱任性就下载企业版,哈哈. 目前使用最多的版本是mysql i ...

  10. iOS开发之新浪微博山寨版代码优化

    之前发表过一篇博客“IOS开发之新浪围脖”,在编写代码的时候太偏重功能的实现了,写完基本功能后看着代码有些别扭,特别是用到的四种cell的类,重复代码有点多,所以今天花点时间把代码重构一下.为了减少代 ...