CSS制作翻牌特效

　　应一个朋友要求替他把原本静态页面做成翻牌的特效。

　　主要应用了CSS3的transform，transiton。首先写好标签，一个ul下两个li元素，通过position的absolue设置两个li元素重合，设置z-index大小使不同呈现。然后css中设置hover事件并更改相应CSS属性。代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .nav {
        transition: transform 0.6s ease-out;
        transition: transform .5s ease-in-out;
        -webkit-transition: transform .5s ease-in-out;
        -moz-transition: transform .5s ease-in-out;
        -ms-transition: transform .5s ease-in-out;
        -o-transition: transform .5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        /*使其子类变换后得以保留 3d转换后的位置*/
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        display: block;
        position: relative;
    }
    
    .nav:hover .list2 {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        z-index: 2;
    }
    
    .nav:hover .list1 {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        z-index: 1;
    }
    
    .nav,
    .list1,
    .list2 {
        width: 200px;
        height: 200px;
    }
    .list1,
    .list2{
         backface-visibility: hidden;
        transition: 0.6s ease-out;
        -webkit-transition: .6s ease-out;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
    }
    .list1 {
        z-index: 2;
        transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    
    .list2 {
        z-index: 1;
        transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
    }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="list1"><img src="1.png">前面</li>
        <li class="list2"><img src="2.png">后面</li>
    </ul>
</body>

</html>

　

posted @ 2016-10-10 00:33  清风·流云  阅读(739)  评论(0)  编辑  收藏  举报