实现图片由左向右飞入回到最初设定位置 ，鼠标浮上去旋转显示另一张图片效果；

html:

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html"; charset="utf-8" />

        <title>图片翻转CSS3</title>

    </head>

    <body>

        <div class="page">

            <ul id="box">

                <li>

                    <div class="div1">

                        <img src="Images/m.png" alt=""/></div>

                </li>

                <li>

                    <span></span><div class="div2">

                        <img src="Images/w.png" alt=""/></div>

                </li>

                <li>

                    <span></span><div class="div3">

                        <img src="Images/k.png" alt=""/></div>

                </li>

                <li>

                    <span></span><div class="div4">

                        <img src="Images/t.png" alt=""/></div>

                </li>

            </ul>

        </div>

    </body>

</html>
 

2. css部分：

@-webkit-keyframes "mixovMove"

        {

            0%

            {

                -webkit-animation-timing-function:ease;

                left:-300px;

                -webkit-transform:rotateY(0deg) scale(0);

                opacity:;

            }

            50%

            {

                left:700px;

                -webkit-transform:rotateY(0deg) scale(0.4);

                opacity:;

            }

            100%

            {

                -webkit-transform:rotateY(360deg) scale(1);

            }

        }

        html

        {

            height:100%; margin:0 auto; position:relative;

        }

        body

        {

            background:url(Images/miaov.jpg) no-repeat center 0; margin:0 auto; overflow:hidden; padding-top:128px;

        }

        ul

        {

            margin:; padding:;

        }

        li

        {

            list-style:none;

        }

        .page

        {

            height:615px; background:url(Images/1-bg.png) no-repeat;position:relative;overflow:hidden; -webkit-transform-style:preserve-3d;-webkit-perspective:;  margin:0 auto; width:1024px; /*子元素获得透视效果perspective 属性只影响 3D 转换元素。*/

        }

        #box

        {

            width:760px; height:170px; position:absolute; top:150px; left:132px;

        }

        li

        {

            float:left; margin:0 10px; width:170px; height:170px; position:relative;

        }

        #box div

        {

            width:170px; height:170px; -webkit-transform:translateZ(-100px) rotateY(0deg); -webkit-transition:300ms -webkit-transform linear;

        }

        #box span

        {

            position:absolute; left:; top:; width:170px; height:170px;

        }

        #box img

        {

            display:none; -webkit-transform:rotateY(180deg);

        }

        .div1

        {

            background:url(Images/c.png) no-repeat;

        }

        .div2

        {

            background:url(Images/s-1.png) no-repeat;

        }

        .div3

        {

            background:url(Images/s-2.png) no-repeat;

        }

        .div4

        {

            background:url(Images/3.png) no-repeat;

        }

3.js部分：

<script>

            window.onload = function () {

                var oBox = document.getElementById("box");

                var aLi = oBox.getElementsByTagName("li");

                var aImg = oBox.getElementsByTagName("img");

                var aDiv = oBox.getElementsByTagName("div");

                for (var i = 0; i < aLi.length; i++) {

                    aLi[i].left = aLi[i].offsetLeft;

                    aLi[i].style.left = "-200px";

                    aLi[i].style.top = "0";

                    aLi[i].index = i;

                    aLi[i].oTimer = null;

                    aLi[i].style["WebkitTransform"] = "rotateY(0deg) scale(0)";

                }

                for (var i = 0; i < aLi.length; i++)

                {

                    aLi[i].style.position = "absolute";

                    move(aLi[i], 300 * i);

                    aLi[i].onmouseover = function () {

                        var oBj = this;

                       // debugger;

                        clearTimeout(oBj.oTimer);

                        oBj.oTimer = setTimeout(function () {

                            aImg[oBj.index].style.display = "block";

                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(180deg)";  //后执行

                        }, 290);

                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)"; //先执行

                    };

                    aLi[i].onmouseout = function ()

                    {

                        var oBj = this;

                        clearTimeout(oBj.oTimer);

                        oBj.oTimer = setTimeout(function () {

                            aImg[oBj.index].style.display = "none";

                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(0deg)";

                        }, 295);

                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)";

                    }

                }

            };

            function move(obj, iTime)

            {

                var oTimer = null;

                oTimer = setTimeout(function () {

                    obj.style.left = obj.left + "px";

                    obj.style["WebkitTransform"] = "rotateY(0deg) scale(1)";

                    obj.style["WebkitAnimationName"] = "mixovMove";

                    obj.style["WebkitAnimationDuration"] = "2s";

                },iTime)

            }

        </script>

图片触及翻转效果 css3的更多相关文章

  1. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

  2. 基于jQuery遮罩图片hover翻转效果

    基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  3. flip 翻转效果 css3实现

    1.实现代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  4. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  5. 用开源项目FlipImageView实现图片的翻转效果

         开源项目地址:https://github.com/castorflex/FlipImageView 本实例我没做什么改动,就是添加了注释,方便大家阅读.和之前一样,导入library和工程 ...

  6. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  7. HTML和CSS实现图片翻转效果

    实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...

  8. CSS3的翻转效果

    css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html 详细的CSS3属性详解: http://www.zhangxinxu.com ...

  9. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

随机推荐

  1. 【原创】Android自定义适配器的使用方法

    比如说我们已经得到了数据,想在一个listview或者在其他的控件中显示的,并且我们显示想要自己设计样式来显示的话就要用到自定义适配器了,下面让我们结合代码讲一下具体的使用方法: 代码会有注释的哦: ...

  2. 集合系列之fail-fast 与fail-safe 区别

    一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加.删除.修改),则会抛出Concurrent Modification Exceptio ...

  3. activemq5.14.5单节点安装Demo

    什么情况下使用ActiveMQ? 1     多个项目之间集成 (1) 跨平台 (2) 多语言 (3) 多项目 2     降低系统间模块的耦合度,解耦 软件扩展性 3     系统前后端隔离 前后端 ...

  4. Eclipse中，快捷键使用总结

    (1)Alt+shift+L:new ReadItem().readItems(file);的返回对象是Map<String,String>用这个快捷键有两个效果示例1:输入光标停在new ...

  5. 一个.net Cookie组件的bug引发的题外话

    在.net里,做过Http模拟发送请求的朋友们应该遇到过,有个时候无论怎么努力,都没办法让Cookie跟网页用浏览器所收集的一样,其中原因除了有些Cookie大概是ReadOnly之外,似乎另有隐情: ...

  6. cordova百度地图定位Android版插件

    本插件利用百度地图提供的定位功能进行Android版手机定位. 为什么没有iOS版? 因为iOS版有官方的定位插件cordova-plugin-geolocation可以使用. 请参照:cordova ...

  7. JDBC数据库编程：callableStatement接口

    了解MySQL存储过程建立, 了解存储过程中参数传递的三种方式 了解callablestatement调用存储过程操作. 因为在现在开发中,使用存储过程的地方越来越少,所以,对于存储过程使用,只需要了 ...

  8. Python 的__name__属性

    Python 的__name__属性: 一个模块被另一个程序第一次引入时,其主程序将运行. 如果我们想在模块被引入时,模块中的某一程序块不执行,我们可以用__name__属性来使该程序块仅在该模块自身 ...

  9. Solr4.0使用

    http://blog.sina.com.cn/s/blog_64dab14801013k7g.html Solr简介 Solr是一个非常流行的,高性能的开源企业级搜索引擎平台,属于Apache Lu ...

  10. linux磁盘满时，如何定位并删除文件

    原文链接: http://www.cnblogs.com/yinxiangpei/articles/4211743.html @1.一般情况   一般情况下先df看一下,然后cd到要满的盘,执行: d ...