网页特效：3D翻转效果示例代码

发布于 2015-04-24 21:57:19 | 210 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

　　前段时间在极客学院的网站上看到了一个网页效果，就是鼠标移到某个块上，出现3D翻转的效果显示背面的内容。对于前端也只是了解一些，当时还不知道这个效果怎么做的，于是查看了它的源码，发现用到了css3的一个属性backface- visibility，这个属性也要配合transform:rotateY来使用，如果将某个div或dom元素的backface- visibility设置为hidden时，表示的是当该div处于背面的时候是隐藏的，也就是需要配合transform:rotateY来使用，将 transform:rotateY设置为transform:rotateY(180deg)或者 transform:rotateY(-180deg)，这样这个div就是处于背面，这个时候这个div就会隐藏了。

　　做到像极客学院这样的翻转效果，其实还是很容易的，大概的思路就是同时定义两个div，采用绝对定位，position:absolute;设置相同的位置参数，总之就是两个div要处于同一位置，然后都将属性backface-visibility设置为hidden，要一开始就隐藏的那个div需要将 transform属性设置为transform:rotateY(-180deg)，当然设置成180deg也是可以的。这样之后处于背面的div就会被隐藏。然后通过js添加鼠标mouseover的事件，将处于前面的div的transform属性改为 transform:rotateY(-180deg)，处于背面的divtransform属性改为transform:rotateY(0deg)，这样处于前面的div变成了背面，处于背面的div又变成了前面，背面的div会隐藏，这样就做到了前面和背面div的切换。但是仅仅这样，效果看起来和生硬，没有过渡的效果。因此每个div需要加上transition属性，将transform设置为0.6s的过渡时间，当然你设置成其他时间也可以。这样翻转的效果就做好了。我上传至了新浪的SAE，可点击链接查看效果http://3doverturn.sinaapp.com/3Doverturn/。

　　源代码如下：

1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3D翻转效果</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<script type="text/javascript">
    $(document).ready(function(){

        for(var i=0;i<10;i++){
            $("#overturn_td"+i).mouseover(function(){

                var getid=this.id.substr(11);
                //alert(getid);
                $("#overturn_front"+getid).css({"-webkit-transform":"rotateY(-180deg)"});
                $("#overturn_back"+getid).css({"-webkit-transform":"rotateY(0deg)"});
            });
            $("#overturn_td"+i).mouseleave(function(){
                var getid=this.id.substr(11);
                $("#overturn_front"+getid).css({"-webkit-transform":"rotateY(0deg)"});
                $("#overturn_back"+getid).css({"-webkit-transform":"rotateY(-180deg)"});
            });
        }
        

    });
</script>

<body>

    <h2>3D翻转效果</h2>
    <h3>by Redstone</h3>
    <table>
        <tr>
            <td id="overturn_td0">
                <div id="overturn_front0">
                    <img src="image/android.png" alt="Android开发">
                </div>
                <div id="overturn_back0">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td1">
                <div id="overturn_front1">
                    <img src="image/ios.png" alt="iOS开发">
                </div>
                <div id="overturn_back1">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td2">
                <div id="overturn_front2">
                    <img src="image/html.png" alt="html5开发">
                </div>
                <div id="overturn_back2">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td3">
                <div id="overturn_front3">
                    <img src="image/Cocos2d-x.png" alt="Cocos2d-x游戏开发">
                </div>
                <div id="overturn_back3">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td4">
                <div id="overturn_front4">
                    <img src="image/c.png" alt="C语言">
                </div>
                <div id="overturn_back4">
                    <button>开始学习</button>
                </div>
            </td>
        </tr>
        <tr>
            <td id="overturn_td5">
                <div id="overturn_front5">
                    <img src="image/Java.png" alt="Java语言">
                </div>
                <div id="overturn_back5">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td6">
                <div id="overturn_front6">
                    <img src="image/php.png" alt="php语言">
                </div>
                <div id="overturn_back6">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td7">
                <div id="overturn_front7">
                    <img src="image/swift.png" alt="Swift">
                </div>
                <div id="overturn_back7">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td8">
                <div id="overturn_front8">
                    <img src="image/bootstrap.png" alt="Bootstrap">
                </div>
                <div id="overturn_back8">
                    <button>开始学习</button>
                </div>
            </td>
            <td id="overturn_td9">
                <div id="overturn_front9">
                    <img src="image/unity3D.png" alt="Unity3D">
                </div>
                <div id="overturn_back9">
                    <button>开始学习</button>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

2.css代码

body h2,h3{
    text-align: center;
    font-family: 微软雅黑;
}
#overturn_front0,#overturn_front1,#overturn_front2,#overturn_front3,#overturn_front4,
#overturn_front5,#overturn_front6,#overturn_front7,#overturn_front8,#overturn_front9{
    height:200px;
    width:200px;
    /*-webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);*/
    -webkit-transition:-webkit-transform 0.6s;
    position:absolute;
    -webkit-backface-visibility:hidden;
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    top:0;
}
#overturn_back0,#overturn_back1,#overturn_back2,#overturn_back3,#overturn_back4,
#overturn_back5,#overturn_back6,#overturn_back7,#overturn_back8,#overturn_back9{
    height:200px;
    width:200px;
    /*-webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);*/
    -webkit-transition:-webkit-transform 0.6s;
    cursor: pointer;
    background:#f5f5f5;
    -webkit-backface-visibility:hidden;
    position: absolute;
    -webkit-transform: rotateY(-180deg);
    top:0;
}

table{
    border-collapse:collapse;
    border-spacing:0;
    margin: auto;
}
table td{
    height: 200px;
    width: 200px;
    border: 1px solid #E4E4E4;
    position: relative;
    padding: 0;
    text-align: center;
    line-height: 200px;
}
table td img{
    width: 140px;
    height: 140px;
    margin-top: 30px;
}

table td button{
    border:none;
    background: #35b558;
    width: 140px;
    height:36px;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 微软雅黑;
    font-size: 16px;
    -webkit-transition:background 0.8s;
    margin-top: 82px;
}

table td button:hover{
    background: #35b57b;
}
#overturn_front{
    height:200px;
    width:200px;
    -webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);
    -webkit-transition:-webkit-transform 0.6s;
    cursor: pointer;
    position:absolute;
    -webkit-backface-visibility:hidden;
    z-index: 2;
    -webkit-transform: rotateY(0deg);
}

#overturn_back{
    height:200px;
    width:200px;
    -webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);
    -webkit-transition:-webkit-transform 0.6s;
    cursor: pointer;
    background:#f5f5f5;
    -webkit-backface-visibility:hidden;
    position: absolute;
    -webkit-transform: rotateY(-180deg);
}

其中的图片使用的就是极客学院上的图片，在此说明一下。当然还引入了jquery。需要的朋友，可以将代码拷贝，同时一些js,css和图片文件的路径需要修改为自己对应的路径。

本人前端水平很一般，在此分享一些自己写过的小demo。望各路大神观光指导。谢谢~

网页特效：3D翻转效果示例代码

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他