rotating 3d bars

by techsin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="m">
    <div class="con">
        <div class="e">A</div>
        <div class="e">B</div>
        <div class="e">C</div>
        <div class="e">D</div>
        <div class="e">E</div>
        <div class="e">F</div>
        <div class="e">G</div>
        <div class="e">H</div>
        <div class="e">I</div>
        <div class="e">J</div>
        <div class="e">K</div>
        <div class="e">L</div>
        <div class="e">M</div>
        <div class="e">N</div>
        <div class="e">O</div>
        <div class="e">P</div>
        <div class="e">Q</div>
        <div class="e">R</div>
        <div class="e">1</div>
        <div class="e">2</div>
        <div class="e">3</div>
        <div class="e">4</div>
        <div class="e">5</div>
        <div class="e">6</div>
        <div class="e">7</div>
        <div class="e">8</div>
        <div class="e">9</div>
        <div class="e">10</div>
        <div class="e">11</div>
        <div class="e">12</div>
        <div class="e">13</div>
        <div class="e">14</div>
        <div class="e">15</div>
        <div class="e">16</div>
        <div class="e">17</div>
        <div class="e">18</div>
        <div class="e">19</div>
        <div class="e">20</div>
        <div class="e">21</div>
        <div class="e">22</div>
        <div class="e">23</div>
        <div class="e">24</div>
        <div class="e">25</div>
        <div class="e">26</div>
        <div class="e">27</div>
        <div class="e">28</div>
        <div class="e">29</div>
        <div class="e">30</div>
        <div class="e">31</div>
        <div class="e">32</div>
        <div class="e">33</div>
        <div class="e">34</div>
        <div class="e">35</div>
        <div class="e">36</div>
        <div class="e">37</div>
        <div class="e">38</div>
    </div>
</div>

CSS

.e {
    height: 100px;
    width: 50px;
    display: inline-block;
    border-radius:2px;
    color: white;
    background-color: #7F8EA2;
    text-align: center;
    opacity: .7;
    box-shadow: 0 0 5px 2px #B6D6FF;
    line-height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
.m {
    transform-style: preserve-3d;
    perspective:600px;
    position: absolute;
    top: 50%;
    left:50%;
    margin-top: -200px;
    margin-left: -250px;
    width:300px;
    display: inline-block;
}
.con {
    animation: r 3s linear infinite;
    transform-style: preserve-3d;
    position: relative;
    left: 80%;
    transform-origin: 25px 0px 0px;
}
html, body {
    overflow: hidden;
    height: 100%;
}
* {
    pointer-events: none;
    user-select: none;
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(25, 27, 34);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 13, 66, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
}
@keyframes r {
    0% {
        transform: rotateY(0deg) translateY(0px);
    }
    50% {
        transform: rotateY(180deg) translateY(-200px);
    }
    100% {
        transform: rotateY(360deg) translateY(0px);
    }
}

JavaScript

var e = $('.e'),
    n = e.length,
    deg = 360 / 9,
    v, arr = [],
    ol = 100 / 8;
for (var l = 0; l < n; l++) {
    arr[l] = ol;
    ol += 100 / 8;
}

e.each(function (i) {
    v = i * deg;
    $(this).css('transform', 'translate3d(' + Math.cos((90 - v) * (3.14 / 180)) * 200 + 'px, ' + arr[i] + 'px, ' + Math.cos(v * (3.14 / 180)) * 200 + 'px) rotateY(' + v + 'deg)');
});



function rd() {
    return Math.random();
}