js实现三维盒子展开图片切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：js实现三维盒子展开图片切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
        background: #696969;
        font-family:  'comic sans ms', Helvetica,  arial,  sans-serif;
    }
    
    .multiSlide {
        width: 470px;
        height: 470px;
        position: relative;
        margin: 100px auto 0;
        overflow: hidden;
        -webkit-perspective: 300px;
    }
    .box {
        background: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        padding:5px;
        width: 140px;
        height: 140px;
        border-radius: 4px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5),inset 0 -1px 2px 0 rgba(0,0,0,0.3);
        -webkit-transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4);
        -moz-transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4);
        transition: all 500ms cubic-bezier(0.7,-0.9,0.3,1.4);
        opacity: 1;
    }
    .box[data-pos='21']{
        -webkit-transform: rotateX(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0.8;
    }
    .box[data-pos='23']{
        -webkit-transform: rotateX(-30deg);
        -webkit-transform-origin: center top;
        opacity: 0.8;
    }
    .box[data-pos='12']{
        -webkit-transform: rotateY(-30deg);
        -webkit-transform-origin: right center;
        opacity: 0.8;
    }
    .box[data-pos='32']{
        -webkit-transform: rotateY(30deg);
        -webkit-transform-origin: left center;
        opacity: 0.8;
    }
    .box[data-pos='2-1'],
    .box[data-pos='20'],
    .box[data-pos='24'],
    .box[data-pos='25'],
    .box[data-pos='02'],
    .box[data-pos='42'],
    .box[data-pos='-12'],
    .box[data-pos='52']{
        opacity: 0;
    }
    .box img {
        width: 140px;
        height: 140px;
    }
    
    .multiSlideNav {
        width: 470px;
        height: 470px;
        position: absolute;
        left: 50%;
        top: 100px;
        margin: 0 0 0 -235px;
    }
    .navButton {
        position: absolute;
        width: 30px;
        height: 30px;
        background: #444;
        border-radius: 100%;
        left: 50%;
        top: 50%;
        text-decoration: none;
        line-height: 27px;
        text-align: center;
        color: #888;
        font-size: 22px;
        font-weight: bold;
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    .navButton:hover {
        background: #5f5f5f;
    }
    .navButton#top {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        -transform: rotateZ(90deg);
        margin: -215px 0 0 -15px;
    }
    .navButton#bottom {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        -transform: rotateZ(90deg);
        margin: 185px 0 0 -15px;
    }
    .navButton#left {
        margin: -15px 0 0 -215px;
    }
    .navButton#right {
        margin: -15px 0 0 185px;
    }
    </style>

</head>

<body>

    <figure id="multiSlide" class="multiSlide"></figure>
    <nav id="multiSlideNav" class="multiSlideNav">
        <a href="#" id="top" class="navButton">
            <</a>
                <a href="#" id="bottom" class="navButton">></a>
                <a href="#" id="left" class="navButton">
                    <</a>
                        <a href="#" id="right" class="navButton">></a>
    </nav>

    <script>
        window.addEventListener('load',function(){
            figure = document.getElementById('multiSlide');
            topButton       = document.getElementById('top');
            bottomButton    = document.getElementById('bottom');
            leftButton      = document.getElementById('left');
            rightButton     = document.getElementById('right'); 
            
            new Box(-2,2,'//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90');
            new Box(-1,2,'//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90');
            new Box(0,2,'//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90');
            new Box(1,2,'//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90');
            new Box(2,2,'//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png?x-oss-.........完整代码请登录后点击上方下载按钮下载查看