<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>css3 3D广告</title>
    <script src="js/jquery.1.9.0.min.js"></script>
    <style>
        img {
        width:300px;
        height:200px;
        }
        section div {
            position:absolute;
            top:0px;
            left:0px;
            width:300px;
            height:200px;
        }
       
    </style>
</head>
<body>
<div style="position:relative;margin:0 auto;width:300px;">
    <section>
       <!-- backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，
           这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility
           设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。-->

<div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
                    -webkit-transform:rotate3d(0,1,0,180deg);">
            <a href="#">
                 <img src="data:images/di%20(1).jpg" />
            </a>
        </div>
        <div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
                    -webkit-transform:rotate3d(0,1,0,0deg);">
            <a href="#">
                <img src="data:images/di%20(2).jpg" />
            </a>
        </div>
    </section>
</div>
</body>
<script>
    var sign = 0;
    setInterval(function () {
        if (sign % 2 == 0) {
            $("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
            $("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
        } else {
            $("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
            $("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
        }
        sign++;
    }, 2000)

</script>
</html>

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旋转动画代码实例

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

  4. 3D旋转动画练习 demo

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

  5. CSS3 3D旋转动画菜单

    在线演示 本地下载

  6. 3d旋转动画焦点图

    在线演示 本地下载

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

    在线演示       本地下载

  8. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  9. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

随机推荐

  1. hdu 2141 （二分）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2141 Can you find it? Time Limit: 10000/3000 MS (Java/O ...

  2. observer观察者模式

    观察者模式(有时又被称为发布-订阅Subscribe>模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,让 ...

  3. Python面向对象入门

    http://www.math.pku.edu.cn/teachers/qiuzy/ds_python/courseware/ 这本书的第二章写的是抽象数据类型和Python类 以前从没想过认真的去写 ...

  4. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  5. 漫谈 Greenplum 开源背后的动机

    漫谈 Greenplum 开源背后的动机  Greenplum是一家总部位于美国加利福尼亚州,为全球大型企业用户提供新型企业级数据仓库(EDW).企业级数据云(EDC)和商务智能(BI)提供解决方案和 ...

  6. [置顶] 将项目从tomcat 迁移到JBoss

    注:针对的是jboss5.0,其它版本没有测试过 ,主要参考了:http://www.diybl.com/course/3_program/java/javajs/20100719/460908.ht ...

  7. [转载] google mock cookbook

    原文: https://code.google.com/p/googlemock/wiki/CookBook Creating Mock Classes Mocking Private or Prot ...

  8. jQuery Jcrop API参数说明(中文版)(转)(图片剪切)

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

  9. 动态替换fragment

    // [1]获取手机的宽和高 windommanager WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE); in ...

  10. iOS开发之Xcode　如何使用API帮助

    内容转载自<iOS开发指南 2.6.2 如何使用API帮助> 对于一个初学者来说,学会在Xcode中使用API帮助文档是非常重要的.下面我们通过一个例子来介绍API帮助文档的用法.在编写H ...