码迷，mamicode.com
首页 > Web开发 > 详细

js 3D旋转效果

时间：2019-01-15 15:42:52      阅读：142      评论：0      收藏：0      [点我收藏+]

标签：系统   play   联网   rip   table   spl   方式   time   经济   

技术分享图片

 


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>智慧园区</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/swiper.min.css">
    <!-- <link rel="stylesheet" href="http://61.174.54.120:9000/static/home/css/index.css"> -->
    <style>
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video,
    input {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    menu,
    nav,
    section {
        display: block;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
    }
    
    body {
        line-height: 1;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* custom */
    
    a {
        color: #7e8c8d;
        -webkit-backface-visibility: hidden;
        text-decoration: none;
    }
    
    li {
        list-style: none;
    }
    
    body {
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    body {
        background-color: #000;
        font-family: "Microsoft Yahei";
    }
    
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 1366px;
        min-height: 768px;
        overflow: hidden;
        /*background: url("../images/bg.png");*/
        background:black;
        background-size: cover;
        transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .container .header {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: url("../images/title.png") no-repeat center top/1366px auto;
    }
    
    .container .headWord {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        font: 24px "微软雅黑";
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-align: -webkit-center;
        line-height: 60px;
        letter-spacing: 2px;
    }
    
    .container .header h2 {
        padding-left: 60px;
        font-size: 54px;
        color: #ffffff;
    }
    
    .container .header .right {
        position: absolute;
        top: 17px;
        right: 13px;
        height: 24px;
        line-height: 24px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .container .header .right a {
        font-size: 16px;
        color: #ffffff;
        margin-right: 10px;
        padding-left: 20px;
        background: url("../images/icon_exit.png") no-repeat left center/auto 16px;
    }
    
    .container .header .right .qr {
        position: relative;
        font-size: 16px;
        color: #ffffff;
        margin-right: 35px;
        cursor: pointer;
    }
    
    .container .header .right .qr:hover div {
        display: block;
    }
    
    .container .header .right .qr span {
        padding-left: 20px;
        background: url("../images/icon_app.png") no-repeat left center/auto 16px;
    }
    
    .container .header .right .qr div {
        position: absolute;
        display: none;
        top: 30px;
        left: 0;
        width: 100px;
        height: 100px;
        padding: 5px;
        background-color: #fff;
        -webkit-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }
    
    .container .header .right .qr div img {
        width: 100%;
        height: 100%;
    }
    
    .container .top {
        position: relative;
        z-index: 20;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 350px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        top: -60px;
    }
    
    .container .top .left {
        width: 370px;
        position: relative;
        margin-right: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .container .top .left .scene {
        position: relative;
        width: 200px;
        height: 160px;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    
    .container .top .left .carousel {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transform: translateZ(-288px);
        transform: translateZ(-288px);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
    }
    
    .container .top .left .carousel__cell {
        position: absolute;
        width: 154px;
        height: 136px;
        left: 23px;
        top: 12px;
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        transition: opacity 1s, -webkit-transform 1s;
        transition: transform 1s, opacity 1s;
        transition: transform 1s, opacity 1s, -webkit-transform 1s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .container .top .left .carousel__cell img {
        width: 100%;
        height: 100%;
    }
    
    .container .top .left .arrow-pre,
    .container .top .left .arrow-next {
        width: 43px;
        height: 43px;
        outline: none;
        border: none;
        /*background: url("../images/up.png");*/
        background: red;
        background-size: 100% 100%;
        cursor: pointer;
    }
    
    .container .top .left .arrow-next {
        /*background: url("../images/down.png");*/
        background: red;

    }
    
    .container .top .right {
        width: 520px;
        margin-left: 70px;
        height: 100%;
        overflow: hidden;
    }
    
    .container .top .right .swiper-container {
        height: 100%;
    }
    
    .container .top .right .swiper-container .swiper-slide {
        position: relative;
    }
    
    .container .top .right .swiper-container .swiper-slide h4 {
        font-size: 36px;
        color: #ffffff;
        margin-bottom: 20px;
    }
    
    .container .top .right .swiper-container .swiper-slide span {
        display: inline-block;
        height: 40px;
        line-height: 36px;
        text-align: center;
        padding: 0 20px;
        font-size: 20px;
        color: #ffffff;
        margin-right: 10px;
        border: 2px solid rgba(0, 252, 255, 0.5);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(43, 111, 235, 0.3);
        border-radius: 20px;
    }
    
    .container .top .right .swiper-container .swiper-slide p {
        margin-top: 60px;
        font-size: 16px;
        color: #ffffff;
        line-height: 36px;
    }
    
    .container .top .right .swiper-container .swiper-slide a {
        display: block;
        margin-top: 20px;
        width: 120px;
        height: 42px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 38px;
        text-align: center;
        border-radius: 20px;
        border: solid 2px #ffffff;
        font-size: 20px;
        color: #ffffff;
        background-color: transparent;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
    }
    
    .container .top .right .swiper-container .swiper-slide a:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: #666;
    }
    
    .container .top .right .swiper-container .swiper-slide .server {
        position: absolute;
        width: 120px;
        height: 120px;
        bottom: 0;
        right: 0;
    }
    
    .container .bottom {
        position: absolute;
        width: 1084px;
        height: 163px;
        bottom: 65px;
        left: 50%;
        margin-left: -542px;
        z-index: 20;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-image: url("../images/bottom-box.png");
        background-size: 100%;
        -webkit-transition: all 1s;
        transition: all 1s;
    }
    
    .container .bottom::before {
        position: absolute;
        content: ‘‘;
        width: 75px;
        height: 177px;
        background: url("../images/bottom-left.png") no-repeat left center/auto 177px;
        top: 0;
        left: -75px;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
    }
    
    .container .bottom::after {
        position: absolute;
        content: ‘‘;
        width: 75px;
        height: 177px;
        background: url("../images/bottom-left.png") no-repeat right center/auto 177px;
        top: 0;
        right: 357px;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
    }
    
    .container .bottom.goright::before {
        left: 651px;
    }
    
    .container .bottom.goright::after {
        right: -75px;
    }
    
    .container .bottom .left {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 649px;
        height: 169px;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 23px 10px 19px;
    }
    
    .container .bottom .left li:nth-child(1) i {
        background-image: url("../images/icon_1_1.png");
    }
    
    .container .bottom .left li:nth-child(2) i {
        background-image: url("../images/icon_1_2.png");
    }
    
    .container .bottom .left li:nth-child(3) i {
        background-image: url("../images/icon_1_3.png");
    }
    
    .container .bottom .left li:nth-child(4) i {
        background-image: url("../images/icon_1_4.png");
    }
    
    .container .bottom .left li:nth-child(5) i {
        background-image: url("../images/icon_1_5.png");
    }
    
    .container .bottom .right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 354px;
        height: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 23px 10px 19px;
    }
    
    .container .bottom .right li:nth-child(1) i {
        margin-left: -2px;
        background-image: url("../images/icon_1_5.png");
    }
    
    .container .bottom .right li:nth-child(2) i {
        background-image: url("../images/icon_1_6.png");
    }
    
    .container .bottom h4 {
        font-size: 17px;
        line-height: 20px;
        padding-bottom: 4px;
        color: #02f6ff;
        font-family: "Microsoft Yahei";
        border-bottom: 2px solid #02f6ff;
    }
    
    .container .bottom ul {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    .container .bottom ul::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 92%;
        width: 100%;
        content: ‘‘;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
        background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.05), rgba(0, 246, 255, 0.2));
    }
    
    .container .bottom ul li {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        opacity: 0.6;
    }
    
    .container .bottom ul li p {
        font-size: 14px;
        color: #fff;
    }
    
    .container .bottom ul li i {
        display: block;
        width: 31px;
        height: 31px;
        background-size: 31px auto;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 15px;
    }
    
    .container .bottom ul li::before {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        height: 80%;
        width: 100%;
        content: ‘‘;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: -webkit-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -moz-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -ms-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        background-image: -o-linear-gradient(bottom, rgba(0, 246, 255, 0.01), rgba(0, 246, 255, 0.2));
        border-top: 4px solid #00f6ff;
    }
    
    .container .bottom ul li.active,
    .container .bottom ul li:hover {
        opacity: 1;
    }
    
    .container .bottom ul li.active::before,
    .container .bottom ul li:hover::before {
        display: block;
    }
    
    .container .bottom ul li.active {
        background: url("../images/bottom-select.png") no-repeat center 10px/116px auto;
    }
    
    .container .left-nav {
        position: absolute;
        z-index: 22;
        right: 0;
        top: 100px;
    }
    
    .container .left-nav li {
        position: relative;
        margin-bottom: 2px;
    }
    
    .container .left-nav li p {
        width: 51px;
        height: 60px;
        background: url("../images/bd.png");
        background-size: 100%;
        line-height: 60px;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
    }
    
    .container .left-nav li a {
        position: absolute;
        top: 0;
        left: 60px;
        display: block;
        font-size: 14px;
        color: #ffffff;
        width: 270px;
        height: 60px;
        background: url("../images/bd2.png") no-repeat left center/auto 60px;
        text-align: center;
        line-height: 60px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .container .left-nav li:hover p {
        opacity: 0;
    }
    
    .container .left-nav li:hover a {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="right" style="z-index: 99999;">
                <!-- <div> -->
                <a href="/index" color="#fff" target="_blank">
                    <span>控制台</span>
                </a>
                <!-- </div> -->
                <a href="/logout">退出</a>
            </div>
        </div>
        <div class="headWord">
            <p>智慧园区统一工作站</p>
        </div>
        <div class="top">
            <div class="left">
                <button class="arrow-pre previous-button"></button>
                <div class="scene">
                    <div class="carousel">
                        <div class="carousel__cell" data-index="0"><img src="http://61.174.54.120:9000/static/home/images/img1.png" alt=""></div>
                        <div class="carousel__cell" data-index="1"><img src="http://61.174.54.120:9000/static/home/images/img2.png" alt=""></div>
                        <div class="carousel__cell" data-index="2"><img src="http://61.174.54.120:9000/static/home/images/img3.png" alt=""></div>
                        <div class="carousel__cell" data-index="3"><img src="http://61.174.54.120:9000/static/home/images/img4.png" alt=""></div>
                        <div class="carousel__cell" data-index="4"><img src="http://61.174.54.120:9000/static/home/images/img5.png" alt=""></div>
                        <div class="carousel__cell" data-index="5"><img src="http://61.174.54.120:9000/static/home/images/img6.png" alt=""></div>
                    </div>
                </div>
                <button class="arrow-next next-button"></button>
                <!-- <div class="arrow arrow-left"></div>
        <div class="arrow arrow-right"></div> -->
            </div>
            <div class="right">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <h4>智慧管控平台</h4>
                            <div><span class="type-1">管理中枢</span></div>
                            <p>集成园区内的信息化智能管控设备，用一张图对园区进行综合管理，并打通其他应用系统，进行应急情况系统派单处理</p>
                            <a href="http://115.236.99.184:9090/server/check" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>智慧党建</h4>
                            <div><span class="type-1">管理中枢</span></div>
                            <p>通过信息化手段，加强以园区为单位的基层党建建设，促进园区内中小企业党组织建设从而对企业健康发展起到促进作用</p>
                            <a href="http://61.174.54.120:9000/party/home/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>智慧物业</h4>
                            <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
                            <p>智慧物业管理系统，结合物联网+园区智慧物业服务，帮助园区构建线上线下结合的物业服务体系</p>
                            <!-- <a href="http://115.236.99.184:8001/zhplat/login?ticket=59e711d152de7bec7304a8c2ecaf9f0f" target="_blank">立即进入</a> -->
                            <a href="http://61.174.54.120:9000/property/home/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>新媒体</h4>
                            <div><span class="type-1">管理中枢</span><span class="type-2">超时空展示平台</span></div>
                            <p>新媒体运营系统，通过“一端输入，多端展示”的方式，实现大屏、PC、移动设备多端全方位覆盖，打造园区宣传与形象展示金名片</p>
                            <a href="http://61.174.54.120:9000/newmedia/index" target="_blank">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>企业服务</h4>
                            <div><span class="type-3">应用平台</span></div>
                            <p>企业服务平台引入优质的第三方服务提供商，对服务提供商的服务进行整合，并在园区方的监管下给园区内企业提供各类服务对接</p>
                            <a href="">立即进入</a>
                        </div>
                        <div class="swiper-slide">
                            <h4>数据驾驶舱</h4>
                            <div><span class="type-3">应用平台</span></div>
                            <p>为小微园区管理提供一揽子的服务，对内管理包含运行概况，智慧物业，园区经济，园区党建，综合管控等内容</p>
                            <!-- <a href="http://datav.aliyun.com/share/df3993679dba4d9ea39373933f519433" target="_blank">立即进入</a> -->
                            <a href="http://61.174.54.120:9000/dist/#/dashboard?userId=27" target="_blank">立即进入</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <h4>管理中枢</h4>
                <ul>
                    <li class="active"><i></i>
                        <p>智慧管控平台</p>
                    </li>
                    <li><i></i>
                        <p>智慧党建</p>
                    </li>
                    <li><i></i>
                        <p>智慧物业</p>
                    </li>
                    <li><i></i>
                        <p>新媒体</p>
                    </li>
                </ul>
            </div>
            <div class="right">
                <h4>应用平台</h4>
                <ul>
                    <li><i></i>
                        <p>企业服务</p>
                    </li>
                    <li><i></i>
                        <p>数据驾驶舱</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://61.174.54.120:9000/static/home/js/swiper.min.js"></script>
    <script type="text/javascript">
    (function() {
        var _max = 6
        var _timer = null
            // 底部选中
        $(‘.bottom ul‘).on(‘click‘, ‘li‘, function() {
            var index = $(this).index();
            if ($(this).parent().parent().hasClass(‘right‘)) {
                index += 4;
            }
            $(‘.bottom ul li‘).removeClass(‘active‘);
            $(this).addClass(‘active‘);
            if ($(this).parent().parent().hasClass(‘right‘)) {
                $(‘.bottom‘).addClass(‘goright‘)
            } else {
                $(‘.bottom‘).removeClass(‘goright‘)
            }
            // 改变滚动图片-3D
            // changeActive(index);
            selectedIndex = index
            rotateCarousel();
            //轮播切换
            swiper.slideTo(index, 600, false); //(index,speed,callBack)
        });
        // swiper初始化
        var swiper = new Swiper(‘.swiper-container‘, {
            allowTouchMove: false,
            preventClicks: false
        });
        // 切换
        function changeActive(index) {
            swiper.slideTo(index, 600, false);
            //触发底部点击事件
            $(‘.bottom li‘).eq(index).click();
            // $(‘.photo-cube__wrapper input‘).eq(0).click()
        };
        //3D旋转方法
        var carousel = document.querySelector(‘.carousel‘);
        var cells = carousel.querySelectorAll(‘.carousel__cell‘);
        var cellCount = 6;
        var selectedIndex = 0;
        var activeIndex = 0;
        var cellWidth = carousel.offsetWidth;
        var cellHeight = carousel.offsetHeight;
        var isHorizontal = false;
        var rotateFn = isHorizontal ? ‘rotateY‘ : ‘rotateX‘;
        var radius, theta;

        function rotateCarousel() {
            var angle = theta * selectedIndex * -1;
            carousel.style.transform = ‘translateZ(‘ + -radius + ‘px) ‘ +
                rotateFn + ‘(‘ + angle + ‘deg)‘;
        }
        //左右切换
        var prevButton = document.querySelector(‘.previous-button‘);
        prevButton.addEventListener(‘click‘, function() {
            selectedIndex--;
            if (activeIndex === 0) {
                activeIndex = cellCount - 1;
            } else {
                activeIndex--
            }
            var index = $(‘.carousel__cell‘).eq(activeIndex).data(‘index‘)
            changeActive(index)
            rotateCarousel();
        });
        var nextButton = document.querySelector(‘.next-button‘);
        nextButton.addEventListener(‘click‘, function() {
            selectedIndex++;
            if (activeIndex === (cellCount - 1)) {
                activeIndex = 0
            } else {
                activeIndex++
            }
            var index = $(‘.carousel__cell‘).eq(activeIndex).data(‘index‘)
            changeActive(index)
            rotateCarousel();
        });

        function changeCarousel() {
            theta = 360 / cellCount;
            var cellSize = isHorizontal ? cellWidth : cellHeight;
            radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                if (i < cellCount) {
                    // visible cell
                    cell.style.opacity = 1;
                    var cellAngle = theta * i;
                    cell.style.transform = rotateFn + ‘(‘ + cellAngle + ‘deg) translateZ(‘ + radius + ‘px)‘;
                } else {
                    // hidden cell
                    cell.style.opacity = 0;
                    cell.style.transform = ‘none‘;
                }
            }
            rotateCarousel();
        };
        // set initials
        changeCarousel();
    })()
    </script>
</body>

</html>

 

js 3D旋转效果

标签：系统   play   联网   rip   table   spl   方式   time   经济   

原文地址：https://www.cnblogs.com/Byme/p/10271923.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！