<!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. Spring Web Flow使用

    就当我写(嘘,抄)着玩的. 使用Spring框架的一个子项目--Spring Web Flow来建立和管理Web应用和UI流程. 第一节:使用Spring Web Flow在一个Spring MVC应 ...

  2. 验证SMB登入

    使用SMB登入扫描器对大量主机的用户名和口令进行猜解,不过扫描动静很大,容易被察觉,而且每一次登入尝试都会被扫描的主机系统日志记录下来,留下痕迹不建议使用. 实例 第一步: msf > use ...

  3. python_way day6 反射，正则 模块（进度条，hash）

    python_way day6 反射 正则 模块 sys,os,hashlib 一.模块: 1.sys & os: 我们在写项目的时候,经常遇到模块互相调用的情况,但是在不同的模块下我们通过什 ...

  4. 不要温柔地走入promise

    第一步 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  5. JS事件中的对象

    在触发任何事件时都会产生一个对象.如:DOM事件,window事件等,都会产生一个对象,该对象就是当前元素的事件对象. DOM事件对象 <body> <input type=&quo ...

  6. phpmailer发送邮件 SMTP Error: Could not authenticate 错误

    这个错误说明虚拟主机不支持PHPMailer默认调用的fsockopen函数,找到class.smtp.php文件,搜索fsockopen,就找到了这样一段代码: $this->smtp_con ...

  7. Java中值传递的实质，形式参数与实际参数。引用传递。

    值传递 package ch5; /** * Created by Jiqing on 2016/11/9. */ public class Transfer { public static void ...

  8. 在Windows和Linux上安装paramiko模块

    一.paramiko模块有什么用? paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接.由于使用的是python这样的能够跨平台运行的语言 ...

  9. word双栏排版，最后一页由于分节符造成最后一页是空白页，删除分节符双栏就变成了单栏

    遇到这个问题时,我们把心思都花在了如何“删除”这个空白页. 但是最有效的办法不是“删除”,而是(以word2007为例): Word 2007中文版: 鼠标放在最后一页,点击页面布局①,选择页面布局右 ...

  10. mysql使用笔记（四）

    一.选择合适的数据类型 1. CHAR vs VCHAR     char是固定长度的字符类型,而varchar是可变长度的字符类型.char(M)的数据列中,每个值都占用M个字节,如果某个长度小于M ...