效果预览: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. Scala 笔记

    环境 1. Intellij Idea 2. Scala 插件 3. http://scala-lang.org/ 教程: idea官方教程: https://www.jetbrains.com/he ...

  2. ENode框架Conference案例分析系列之 - 上下文划分和领域建模

    前面一片文章,我介绍了Conference案例的核心业务,为了方便后面的分析,我这里再列一下: 业务描述 Conference是这样一个系统,它提供了一个在线创建会议以及预订会议座位的平台.这个系统的 ...

  3. 新浪微博UWP版-实现‘分享功能’的艰难路

    索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...

  4. CI-持续集成（1）-软件工业“流水线”概述

    CI-持续集成(1)-软件工业“流水线”概述 1   概述 持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次, ...

  5. 细说ES7 JavaScript Decorators

    开篇概述 在上篇的ES7之Decorators实现AOP示例中,我们预先体验了ES7的Decorators,虽然它只是一个简单的日志AOP拦截Demo.但它也足以让我们体会到ES7 Decorator ...

  6. Redis高可用分布式内部交流(九)

    这是上月在公司内部的一次分享,现把PPT及交流内容整理成博客. 阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务 ...

  7. 七天学会ASP.NET MVC (四)——用户授权认证问题

    小编应各位的要求,快马加鞭,马不停蹄的终于:七天学会 Asp.Net MVC 第四篇出炉,在第四天的学习中,我们主要了学习如何在MVC中如何实现认证授权等问题,本节主要讲了验证错误时的错误值,客户端验 ...

  8. ASP.NET MVC 5 - 查询Details和Delete方法

    在这部分教程中,接下来我们将讨论自动生成的Details和Delete方法. 查询Details和Delete方法 打开Movie控制器并查看Details方法. public ActionResul ...

  9. atitit.闭包的概念与理解attilax总结v2 qb18.doc

    atitit.闭包的概念与理解attilax总结v2 qb18.doc 1.1. 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.1 2. #---- ...

  10. SSISDB3：Environments 和 Environment Variables

    Environment 是ETL执行时使用的Parameters的集合,可以为一个Project引用不同的Environment variables,从而改变ETL执行的属性. 查看Environme ...