首页 > > 网页制作 > css >
js 3D旋转效果

2019-01-16 05:49:15来源：博客园阅读 ()

<!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>