<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{margin:0;

padding:0;}

.wrapper1{

width:150px;

height:191px;

border:#eee 1px solid;

border-radius:10px;

padding:2px;

float:left;

margin:200px 0 0 50px;

-moz-perspective:800px;

  -moz-transform-style:preserve-3d;

  -webkit-perspective:800px;

  -webkit-transform-style:preserve-3d;

  -moz-backface-visibility:;

    -webkit-backface-visibility:hidden;

}

.box1{

width:150px;

height:191px;

background:url(http://p1.qhimg.com/t0151320b1d0fc50be8.png);

border-radius:10px;

-webkit-animation-name:wobble;

  -webkit-animation-duration: 5s;

  -webkit-animation-timing-function: linear;

  -webkit-animation-delay: 0;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-direction: ;

  -moz-animation-name:wobble;

  -moz-animation-duration: 5s;

  -moz-animation-timing-function: linear;

  -moz-animation-delay: 0;

  -moz-animation-iteration-count: infinite;

  -moz-animation-direction: ;

}

@-webkit-keyframes wobble{

     0% {

  -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     25% {

  -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     50% {

  -webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     75% {

  -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     100% {

  -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

  }

@-moz-keyframes wobble{

     0% {

        -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     25% {

        -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     50% {

        -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     75% {

        -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

     100% {

        -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);

     }

  }

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="wrapper1">

<div class="box1"></div>

</div>

</body>

</html>

CSS3 3D旋转动画代码实例的更多相关文章

  1. Css3 3D 旋转动画效果

    需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...

  2. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. CSS3 3D旋转动画菜单

    在线演示 本地下载

  4. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  6. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  7. 3D旋转动画

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  8. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  9. CSS3鼠标滑过图片3D旋转动画

    在线演示       本地下载

随机推荐

  1. Tomcat启动会遇到的问题部分解决方案

    Tomcat的启动不一定会非常的顺利,这可以有多种原因 一.Tomcat是由Java所编写的,因此Tomcat的使用需要JDK的支持,如果没有配置环境变量,Tomcat当然无法启动,最明显的特征就是点 ...

  2. Oracle静态监听与动态监听概念全解析

    基于11g,linux5.5做出的测试,单实例数据库做出的测试. 1.注册 Instance到监听器去注册自己的Instance_name与ORACLE_HOME,还可以选择添加global_dbna ...

  3. [Android开发Tips]Bean的定义

    Bean: public class Data extends BaseBean { public ArrayList<DataItem> data = new ArrayList< ...

  4. How do I create a zip file?(转)

    Creating a zip file is a task that can easily be accomplished by using the classes ZipOutputStream a ...

  5. Windowbuilder之swt designer安装与使用（转）

    SWT可视化设计,可以使用Google的WindowBuilder. 在Google Code中,搜索WindowBuilder就可以看到路径. 在Eclipse中   Help--->Inst ...

  6. java垃圾回收那点事（二）不同gc策略的heap分配

    在前面的文章中曾提到了在java虚拟机启动的时候会对G1,CMS, SerialGC定义不同的heap的类,并且定义不同的policy. CollectorPolicy CollectorPolicy ...

  7. SetCapture ReleaseCapture

    函数功能:该函数在属于当前线程的指定窗体里设置鼠标捕获.一旦窗体捕获了鼠标,全部鼠标输入都针对该窗体,不管光标是否在窗体的边界内.同一时刻仅仅能有一个窗体捕获鼠标.假设鼠标光标在还有一个线程创建的窗体 ...

  8. jvm调优经验分享

    当Java程序申请内存,超出VM可分配内纯的时候,VM首先可能会GC,假设GC完还是不够,或者申请的直接超够VM可能有的,就会抛出内 存溢出异常.从VM规范中我们能够得到,一下几种异常. java.l ...

  9. 网站集成QQ登录功能（转）

    最近在做一个项目时,客户要求网站能够集成QQ登录的功能,以前没做过这方面的开发,于是去QQ的开放平台官网研究了一下相关资料,经过自己的艰苦探索,终于实现了集成QQ登录的功能,现在把相关的开发经验总结一 ...

  10. Android开发者必须深入学习的10个应用开源项目

    Android 开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项 目,贡献出他们的智慧和创造力.学习开源代码是掌握技术的 ...