<!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. eclipse 实用快捷键

    Ctrl+E: 弹出输入窗口,可快速返回想返回的目标界面 Ctrl+Shift+O: 快速import包 Ctrl+O:显示类中方法和属性的大纲 Ctrl+1 快速修复 Ctrl+Alt+↓ 复制当前 ...

  2. 《NoSQL精粹》思维导图读书笔记

    <NoSQL精粹>思维导图读书笔记 各主题笔记 这本书短小精悍,虽不能解答所有NoSQL疑问,但在读书过程中会抛给你不少未曾想过的问题,给人以更深入的思考: 这里对每一个主题分别做了笔记: ...

  3. C#中Application.DoEvents()的作用

    Visual Studio里的摘要:处理当前在消息队列中的所有 Windows 消息. 交出CPU控制权,让系统可以处理队列中的所有Windows消息,比如在大运算量循环内,加Application. ...

  4. 《Linux内核设计的艺术》学习笔记（二）INT 0x13中断

    参考资料: 1. <IBM-PC汇编语言程序设计> 2. http://blog.sina.com.cn/s/blog_5028978101008wk2.html 3. http://ww ...

  5. 你是码农还是Geek？

    现在深深的体会到,不仅仅人与人的差别是巨大的,程序员与程序员之间的差别同样很明显的. 普通的程序员仅仅是完成自己的任务,完成任务后不思进取,不再修改自己的代码,不再去想有没有更好的实现方式,其实重构自 ...

  6. 将图片转成base64 小工具

    工作需要使用,所以就做了一个小工具,方便使用 推荐使用 chrome,ff . 毕竟是个小工具方便自己使用而已,所以没有做浏览器兼容测试了! 代码如下,直接保存为 .html 打开即可 <!DO ...

  7. Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置

    1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...

  8. hdu 2063 过山车（二分图最佳匹配）

    经典的二分图最大匹配问题,因为匈牙利算法我还没有认真去看过,想先试试下网络流的做法,即对所有女生增加一个超级源,对所有男生增加一个超级汇,然后按照题意的匹配由女生向男生连一条边,跑一个最大流就是答案( ...

  9. Android监听Button和ImageButton控件的点击事件

    一.onClick事件 Button和ImageButton都有一个onClick事件,通过自身的.setOnClickListener(OnClickListener)方法添加点击事件 所有的控件都 ...

  10. Python 调用自定义包

    创建包 # mkdir -p /python/utils # touch /python/utils/__init__.py # vi /python/utils/Log.pyimport timed ...