<!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. kvc kvo（摘录）

    概述 由于ObjC主要基于Smalltalk进行设计,因此它有很多类似于Ruby.Python的动态特性,例如动态类型.动态加载.动态绑定等.今天我们着重介绍ObjC中的键值编码(KVC).键值监听( ...

  2. hdu 1247 map的使用

    http://acm.hdu.edu.cn/showproblem.php?pid=1247 Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    ...

  3. c++实现两个文件的拼接。

    问题描述: 要求把第二个文件拼接到第一个文件的末尾. 如把file2 拼接到 file末尾. (直接复制一下不就行了嘛! 但是老师非让编程, 真是蛋疼!!,而且是闲的蛋疼!!!).例如: file1: ...

  4. android上让我放弃使用wstring来操作中英文字符串 转

    android上让我放弃使用wstring来操作中英文字符串 2013-08-07 16:37:24|  分类: cocos2d|举报|字号 订阅     项目需要,需要对中英文字符串进行遍历修改等, ...

  5. week7团队项目体会

    经过这几个星期以来的软件工程的学习,还有自己在个人项目.结对编程.团队项目的感受,总结了一些感受和理解. 总结收获 首先,一个月的软件工程团队项目的进行让我对软件开发有了比较实际的认识,之前的概念仅限 ...

  6. jQuery中的遍历

    在原生javascript中我们用的最多的遍历就是for,但是在jQuery里面有个方法比for还有强大,它就是我们经常看到的each()方法,当然了如果考虑性能方面的话还是建议用for来进行元素的遍 ...

  7. 初试Celery

    从@到celery 一.文档: 官网:http://www.celeryproject.org/ Celery3.1 ------------2016-7-19 18:26:55-- source:[ ...

  8. JavaSE复习_8 泛型程序设计

    今晚看了core Java的泛型部分,万万没有想到,当时看培训班视频入门的一带而过的泛型,有这样多的细节,整理了一下书里面提到的一些自认为的重点,方便以后观阅.由于是复习,一些基础知识跳过. △泛型类 ...

  9. JavaSE复习_2 对象与类

    △java中的制表符.'\t'制表符."\t"也可以. △方法内不能再定义一个方法,互相平级. △数组中boolean类型的变量默认为false;char默认为'\u0000'(\ ...

  10. java.lang.UnsupportedClassVersionError: org/sonatype/nexus/bootstrap/jsw/JswLauncher : Unsupported major.minor version 51.0

    jdk 版本不对,需要修改jdk的版本