<!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. Codeforces 922F Divisibility 构造

    Divisibility 我们考虑删数字 首先我们可以发现有一类数很特殊就是大于 n / 2的素数, 因为这些素数的贡献只有1, 并且在n大的时候, 这些素数的个数不是很少, 我们可以最后用这些数去调 ...

  2. 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)

    注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...

  3. BZOJ2209 [Jsoi2011]括号序列 splay

    原文链接http://www.cnblogs.com/zhouzhendong/p/8093556.html 题目传送门 - BZOJ2209 题解 我太弱了,调出这题感觉都要吐了. 题解懒得写了. ...

  4. sql对于字符串的处理

  5. 035 控制并发 select * from test1 where id =1 for update 就会对这行加锁了？

    今天在看同事程序的时候,看到这种用法,顺便学习下. 一:理论 1.功能 这个功能是上锁. 上的是一个排它锁,也就是说,其他的事务是可以读取的.但是不能写入或者更新. 二:实践 1.创建表 2.提交一条 ...

  6. HashMap实现原理简析及实现的demo（一看就明白）

    HashMap底层就是一个数组结构,数组中的每一项又是一个链表. jdk源码: transient Node<K,V>[] table; static class Node<K,V& ...

  7. windows下编译php7图形库php_ui.dll

    CSDN博客 具有图形化编程才有意思,这几天看到了php ui 图形扩展,只是现在只能下载php 7.1的 本次教程编译php7.2.6的 php ui 要是linux下编译起来比较简单 但是 win ...

  8. Zend 无限试用

    1.显示你的隐藏文件.文件夹 2.删除以下文件.文件夹 文件夹:C:\Users\Administrator\.zend\ 文件夹:C:\Users\Administrator\.ZendStudio ...

  9. C# 动态调用WebService 2

    using Microsoft.CSharp; using System; using System.CodeDom; using System.CodeDom.Compiler; using Sys ...

  10. web前端知识大纲：系列一 js篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript           一.js           1.基础语法 Javascript 基础语法包括:变量声明.数据类型. ...