CSS3实现3D效果的弹出框

    首先，用css3做一个触发弹出框的按钮：

border-radius: 10px; /*圆角*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;


box-shadow: 10px 10px 5px #888; /*阴影(x,y,w,color)*/
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;

    我是将弹出框作为单独的文件通过iframe显示的，也可以做一个div和按钮放在同一个页面。单独的文件的好处在于，真的使用到一个网站的时候，弹出框可以做一个单独的插件，避免每个页面都写弹出框的重复代码。

document.getElementById("dialog").src = "dialog.html";
document.getElementById("dialogFrame").style.display = "block";

    弹出框的处理：

        1、要设置变换围绕的中心：transform-origin: 50% 100%

        2、绑定弹出框出现时的动作myAction：

$blackboard.setAttribute("class", "show")

#blackboard.show{
animation: myAction 1s ease-in-out;
-webkit-animation: myAction 1s ease-in-out;
-moz-animation: myAction 1s ease-in-out;
-ms-animation: myAction 1s ease-in-out;
-o-animation: myAction 1s ease-in-out;
}

         @keyframes myAction{
0% {transform: perspective(1000px) rotate3d(1,0,0,90deg);}
100% {transform: perspective(1000px) rotate3d(1,0,0,0deg);}
}

        3、绑定弹出框关闭时的动作closeAction ：

#blackboard.hide{
animation: closeAction 1s ease-in-out;
-webkit-animation: closeAction 1s ease-in-out;
-moz-animation: closeAction 1s ease-in-out;
-ms-animation: closeAction 1s ease-in-out;
-o-animation: closeAction 1s ease-in-out;
}

@keyframes closeAction{
0% {transform: perspective(1000px) rotate3d(1,0,0,0deg);}
100% {transform: perspective(1000px) rotate3d(1,0,0,90deg);}
}

        这时，你会发现打开弹出框的时候，弹出框是从水平方向抬起，类似古代城墙的吊桥被抬起的效果。而关闭弹出框时，呈现吊桥被放下的效果，但是在结束的时候，又会回到被完全抬起的状态。因为动画结束时，是会回到初始的状态。因此在结束时，要修改弹出框的样式，使它呈现平躺状态：

$blackboard.style.transform = "rotate3d(1, 0, 0, 90deg)";
$blackboard.setAttribute("class", "hide");

setTimeout(function () {
window.parent.document.getElementById("dialog").src = "";
window.parent.document.getElementById("dialogFrame").style.display = "none";
}, 1000);

    效果如下：