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

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

代码语言：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-p.........完整代码请登录后点击上方下载按钮下载查看