<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.spinner {

  width:60px;

  height:60px;

  background:#67CF22;

  margin:100px auto;

  -webkit-animation:rotateplane 1.2s infinite ease-in-out;

  animation:rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

  0% {

    -webkit-transform:perspective(220px);

  }

  50% {

    -webkit-transform:perspective(220px) rotateY(180deg);

  }

  100% {

    -webkit-transform:perspective(220px) rotateY(180deg) rotateX(180deg);

  }

}

@keyframes rotateplane {

  0% {

    transform:perspective(120px) rotateY(0) rotateX(0);

    -webkit-transform:perspective(220px) rotateY(0) rotateX(0);

  }

  50% {

    transform:perspective(120px) rotateY(0) rotateX(-180.1deg);

    -webkit-transform:perspective(220px) rotateY(0) rotateX(-180.1deg);

  }

  100% {

    transform:perspective(120px) rotateY(-179.9deg) rotateX(-180deg);

    -webkit-transform:perspective(220px) rotateY(-179.9deg) rotateX(-180deg);

  }

}

</style>

</head>

<body>

<div class="spinner"></div>

</body>

</html>

css-div翻转动画的更多相关文章

  1. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  4. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  5. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  6. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  9. JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能

    原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...

  10. CSS篇之动画（2）

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

随机推荐

  1. ifconf家族命令

    1  ifconfig 命令: ifconfig 命令用来查看和配置网络设备.当网络环境发生改变时可通过此命令对网络进行相应的配置. 查看: ifconfig : 显示正在激活中的网卡 ifconfi ...

  2. 事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

    ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse ...

  3. INSERT 中ON DUPLICATE KEY UPDATE的使用

    如果您指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则执行旧行UPDATE.例如,如果列a被定义为UNIQUE,并 ...

  4. 20165220预备作业3 Linux安装及学习

    首先对于这第三次作业而言,给我的准备时间确实不多,因为过年回老家6天,没有办法及时的进行学习和思考,回到家中便草草的看了下相关操作跟教程从而完成了作业,这次主要是学习一些基础操作,为开学的Java学习 ...

  5. JavaEE 之 RESTful

    1.RESTful a.定义:一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等 ...

  6. Codeforces 1096D Easy Problem 【DP】

    <题目链接> 题目大意: 给你一个字符串,每个字符有权值,问现在删除字符串中的字符使其中没有"hard"的最小代价是多少. 解题分析: 用DP来求解:        转 ...

  7. componentWillReceiveProps详解（this.props）状态改变检测机制

    参考资料:http://blog.csdn.net/ElinaVampire/article/details/51813677 大家先看一张关于组件挂载的经典的图片: 下面一一说一下这几个生命周期的意 ...

  8. [OC] Block的使用

    由ControllerA跳转到controllerB,在controllerB中选择一个参数的值,并将它传回给controllerA. 首先,在controllerB的.h文件中写入: @interf ...

  9. Java读取接口中的数据，并保存到txt文件中！

    //创建读取接口中数据的方法 public static String read() { URL url = null; BufferedReader reader = null; HttpURLCo ...

  10. php xml格式对象 返回->对应格式数组

    /*     * $objXml xml格式对象      * 返回 : 对应格式数组     */    public function XmlString2Arr($xml)    {       ...