<!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. tomcat配置调优与安全总结

    http://vekergu.blog.51cto.com/9966832/1672931 tomcat配置调优与安全总结 作为运维,避免不了与tomcat打交道,然而作者发现网络上关于tomcat配 ...

  2. 利用Flume将MySQL表数据准实时抽取到HDFS

    转自:http://blog.csdn.net/wzy0623/article/details/73650053 一.为什么要用到Flume 在以前搭建HAWQ数据仓库实验环境时,我使用Sqoop抽取 ...

  3. 五种UML工具

    ProcessOn是一款在线流程图软件(https://www.processon.com/),能够高效的完成在线流程图.UI原型图.UML以及组织图,网络拓扑图的构建.该软件最大的特点是,无需安装, ...

  4. 关于HttpModule和HttpHandler以及HttpApplication

    HttpRuntime打交道的是http协议跟IIS层面的东西,HttpApplication则具体到应用程序这一级别(也就是一个网站,这个跟web.config关系是基本一一对应的,像Module跟 ...

  5. DDL DML概念 --- Msysql常用命令

    一.DML DML(data manipulation language)数据操纵语言: 就是我们最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些 ...

  6. Linux学习笔记8

    其他常用命令 cd+回车=回车~ 进入当前用户主目录 查看指定进程信息 #ps -ef |grep  进程名 #ps  ---查看属于自己的进程 #ps -aux  查看所有用户的执行进程 换成  p ...

  7. SpringBoot整合Mybatis-Plus

    这篇文章介绍一个SpringBoot整合Mybatis-Plus,提供一个小的Demo供大家参考. 已经很久没有写文章了,最近家里有点事刚刚处理完,顺便也趁机休息了一段时间.刚回到公司看了一下码云,发 ...

  8. webstorm过期最新激活方法

    打开webstorm 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址:http://idea.iteblog.com/key.p ...

  9. Java代码优化小结（一）

    (1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是final的.为类指 ...

  10. IDEA中maven模块变成灰色

    可能该模块被忽略,解决办法: