<!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. [C程序设计语言]第二部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. 图解SQL 2008数据库复制

    为了达到数据及时备份,一般采用完整备份+差异备份即可,或者再加上日志备份,本文介绍使用数据库复制技术同步数据: PS:文章以图片为主,图片更能直观的看出操作步骤和配置方法! 1.首先创建一个测试的数据 ...

  3. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  4. Java中正则Matcher类的matches()、lookAt()和find()的区别<转>

    在Matcher类中有matches.lookingAt和find都是匹配目标的方法,但容易混淆,整理它们的区别如下: matches:整个匹配,只有整个字符序列完全匹配成功,才返回True,否则返回 ...

  5. poj3449Geometric Shapes

    链接 繁琐. 处理出来所有的线段,再判断相交. 对于正方形的已知对角顶点求剩余两顶点 (列出4个方程求解) p[].x=(p[].x+p[].x+p[].y-p[].y)/; p[].y=(p[].y ...

  6. (二)程序中的内存&&栈

    一.程序运行为什么需要内存?基本概念? 内存是程序运行的立足之地,程序需要用内存来存储一些变量. 内存管理最终是由操作系统完成的,内存在本质上是一个硬件器件,由硬件系统提供:内存由操作系统统一管理,为 ...

  7. Android广播BroadcastReceiver 一

    Android 系统里定义了各种各样的广播,如电池的使用状态,电话的接收和短信的接收,开机启动都会产生一个广播.当然用户也可以自定义自己的广播. 既然说到广播,那么必定有一个广播发送者,以及广播接收器 ...

  8. Bootstrap强调相关的类

    在Bootstrap中除了使用标签<strong>.<em>等说明正文某些字词.句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead” ...

  9. linux下tftp安装与设置

    在学习linux+arm开发的时候,tftp和NFS是必不可少的环境.这里总结一下自己安装和使用tftp的一些经验,做个备忘. 一.tftp服务原理 tftp(trivial file transfe ...

  10. Java常见错误

    1.NullPointerExceptin 空指针异常 a.引用没有初始化就使用 b.引用置空了,仍然被使用 2.IndexOutofBoundsException 下标越界 a.数组下标小于0 或者 ...