CSS3制作3D轮播翻转动画示例

版权声明: https://blog.csdn.net/xyphf/article/details/74525375

知识点:
transform
transform-style: preserve-3d
animation
perspective

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>C3制作3D轮播</title>
<style>
    *{
        margin:0;
        padding:0;
        list-style:none;
    }
    img{
        display:block;
        position: absolute;
        transform: rotateX(180deg);
        transform-origin: bottom;
        opacity:0;
    }
    .box{
        width:300px;
        height:200px;
        margin:100px auto 0;

        position: relative;
    }
    ul,li{
        transform-style: preserve-3d;
        perspective: 800px;
    }

    /* 定义动画 */
    @-webkit-keyframes show{
        0%{
            transform: rotateX(180deg);
            opacity:0;
        }
        50%{
            transform: rotateX(25deg);
            opacity:1;
        }
        60%{
            transform: rotateX(-25deg);
            opacity:1;
        }
        70%{
            transform: rotateX(25deg);
            opacity:1;
        }
        80%{
            transform: rotateX(-6deg);
            opacity:1;
        }
        90%{
            transform: rotateX(6deg);
            opacity:1;
        }
        100%{
            transform: rotateX(0);
            opacity:1;
        }
    }

    /* 定义一个回去的动画 */
    @-webkit-keyframes hide{
        0%{
            transform: rotateX(0);
            opacity:1;
        }
        100%{
            transform: rotateX(180deg);
            opacity:0;
        }
    }

    /* 定义一个类,让它完成从下向上翻转,并伴随透明度变化 */
    .show{
        -webkit-animation:show 1s;  /* 这一步是为了让头向下的图片旋转上来 */

        /* 下面这二步是一个取巧的过程,当我们看到旋转之后迅速的将图片位置和透明度定在正常位置 */
        opacity:1;
        transform: rotateX(0deg);
    }

    .hide{
        -webkit-animation:hide 1s;  /* 这一步是为了让头向下的图片旋转上来 */

        /* 下面这二步是一个取巧的过程,当我们看到旋转之后迅速的将图片位置和透明度定在正常位置 */
        opacity:0;
        transform: rotateX(180deg);
    }

    .btn{
        width:300px;
        height:30px;
        margin:40px auto 0;
    }
    .btn span{
        float:left;
        width:100px;
        height:30px;
        text-align:center;
        line-height:30px;
        background:#ccc;
        margin-left:30px;
        cursor: pointer;
    }
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $(function(){
        var num = 0;
        // 我们点击前后按钮来控制当前图片和下一张图片的显示与隐藏。
        $('.l').click(function(){

            // 让当前显示的这张图片翻转下去
            $('img').eq(num).get(0).className = 'hide';
            num++;
            if(num == 6){
                num = 0;
            }
            $('img').eq(num).get(0).className = 'show';
        });

        $('.r').click(function(){
            // 让当前显示的这张图片翻转下去
            $('img').eq(num).get(0).className = 'hide';
            num--;
            if(num == -1){
                num = 5;
            }
            $('img').eq(num).get(0).className = 'show';
        });
    });
</script>
</head>
<body>
    <div class="btn">
        <span class="l"></span>
        <span class="r"></span>
    </div>
    <div class="box">
        <ul>
            <li><img src="img/01.jpg" width="300" height="200" alt="" class="show"></li>
            <li><img src="img/02.jpg" width="300" height="200" alt="" ></li>
            <li><img src="img/03.jpg" width="300" height="200" alt=""></li>
            <li><img src="img/04.jpg" width="300" height="200" alt=""></li>
            <li><img src="img/05.jpg" width="300" height="200" alt=""></li>
            <li><img src="img/06.jpg" width="300" height="200" alt=""></li>
        </ul>
    </div>
</body>
</html>

效果如图:

CSS3制作3D轮播翻转动画示例

展开阅读全文

没有更多推荐了,返回首页