本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3的3D变形动画效果显示模式对话框

本文介绍如何制作一个通过CSS 3中的3D变形效果及jQuery动画效果显示的模式对话框。

本例中制作具有CSS 3中的3D变形效果的模式对话框的关键之处在于在CSS 3中的transform样式属性中指定perspective属性值(用于指定3D场景的深度)及rotateX属性值、rotateY属性值或rotateZ属性值(指定旋转轴及旋转角度),本例中指定围绕X轴旋转,旋转角度为-60度;同时使用transform-origin样式属性指定旋转时的基准点,本例中该基准点为页面顶部中央;最后使用transition样式属性控制动画速度,具体代码如下所示:

#modalMask {
    transform: perspective(500px) rotateX(-60deg);
    -webkit-transform: perspective(500px) rotateX(-60deg);
    -moz-transform: perspective(500px) rotateX(-60deg);
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transform-origin: center top 0;
    -webkit-transform-origin: center top 0;
    -moz-transform-origin: center top 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255 ,0);
    position: fixed;
    visibility: hidden;
    top: 0px;
    left: 0px; 
    margin:0px;
    z-index: 999;
    
}
#modalWin {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    overflow: auto;
    height: 100%;
    width: 100%;
    cursor: url("close.png"),pointer;
    background-color:lightgray;
    justify-content: center; 
    align-items: center;
}
#modalMask.on
{
    background-color: rgba(255, 255, 255 ,0.75);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    visibility: visible;
}

本例中的HTML代码如下所示。

<input type="button" value="点击显示图片" class="modal"></input>
<div id="modalMask">
    <div id="modalWin">
        <div class="modalinner">
            <img src="1.jpg">
        </div>
    </div>
</div>

最后在jQuery脚本代码中指定当用户点击页面上的“点击显示图片”按钮时使用jQuery中的淡入动画效果动态显示模式对话框,同时通过对模式对话框添加on样式类使淡入前的模式对话框具有三维变形效果,代码如下所示。

$(function(){ 
    $(".modal").click(function(){
        $("#modalWin").fadeIn('normal');
        $("#modalWin").css('display','flex');
        $("#modalMask").addClass('on');
        return false;
    });
    $("#modalMask").click(function(){
        $("#modalMask").removeClass('on');
        $("#modalWin").fadeOut();
    });
});

针对本例中所使用到的CSS 3中的3D变形知识,可购买笔者所著《HTML 5与CSS 3权威指南》查阅更多CSS 3基础知识。