效果预览: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. iOS开发系列--C语言之指针

    概览 指针是C语言的精髓,但是很多初学者往往对于指针的概念并不深刻,以至于学完之后随着时间的推移越来越模糊,感觉指针难以掌握,本文通过简单的例子试图将指针解释清楚,今天的重点有几个方面: 什么是指针 ...

  2. WPF RichTextBox 做内容展示框 滚动条控制判定是否阅读完成

    一.项目背景: 最近,做项目,因为是金融项目,客户登录交易的时候,有一个提示框,就是告知客户要“入市需谨慎”等等,想必大家都遇到这样的场景,当然,这种提示是没人会看的,不过作为交易所,这样的提示又必不 ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (31) ------ 第六章 继承与建模高级应用之自引用关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 6-4  使用TPH建模自引用关系 问题 你有一张自引用的表,它代表数据库上不同类型 ...

  4. C# Azure 存储-队列

    1.前言 本篇文章是根据Azure的官网document总结,如果想直接跳过本文章,可以点击下面的链接进入. https://www.azure.cn/zh-cn/documentation/arti ...

  5. windows7查看最近使用记录

    1.看计算机在哪天运行过~运行了多久! C:\Windows\SchedLgU.txt 2.看你最近运行过什么程序: C:\Windows\Prefetch 3.看你最近打开过什么文件(非程序)和文件 ...

  6. Atitit 研发团队建设----福利法案--非物质福利与物质福利法案

    Atitit 研发团队建设----福利法案--非物质福利与物质福利法案 1.1. 何为非物质福利法案??1 1.2. 福利类型1 1.2.1. 公共福利1 1.2.2. 个人福利2 1.2.3. 组织 ...

  7. CocoaPods pod 安装、更新慢解决方法

    使用CocoaPods来添加第三方类库,无论是执行pod install还是pod update都卡在了Analyzing dependencies不动了,令人甚是DT. 每一次都忘记现在自己记录一下 ...

  8. iOS------苹果设备处理器指令集（iPhone初代到iPhone5s）

    (via 雅香小筑) Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基于arm,其在嵌入式系统中的应用非常广泛,它的性能在同等功耗产品中也很出色. Armv6.armv7.armv7 ...

  9. Java学习笔记（06）

    继承 super关键字 重写 final关键字 抽象类/abstract关键字 接口 一.继承 继承是类与类之间的继承,是一种is a 的关系(继承的满足条件) 继承的类叫子类 / 派生类,被继承的叫 ...

  10. 【Win 10应用开发】多窗口视图

    Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主 ...