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

最新推荐文章于 2024-09-13 21:44:11 发布

xyphf_和派孔明

最新推荐文章于 2024-09-13 21:44:11 发布

阅读量3.5k

点赞数

分类专栏： HTML5 文章标签： css3 动画 3d

本文链接：https://blog.csdn.net/xyphf/article/details/74525375

版权

HTML5 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

知识点：
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>