3Dカルーセルの要素の回転の度合いを自動的に計算する

Question

データベースから情報を取得し、その要素からの要素の数に応じてすべての属性の回転の度合いを計算する3Dカルーセルを作成します。データベース。 私はカルーセルで呼び出すことができる要素の数を6に制限しています。 しかし、私のCSSではすべてが書かれ、6で割り算されています。したがって、データベースに3つの要素しかなければ、 。 私は学生で、今年はコーディングを開始しました。私は小枝で働いています。 ここに私の小枝ファイルです：

<div class="containerc"> 
    <div class="carousel1"> 
    {% for ev in events %} 
     <div class="item1"> 
     <a href="?page=evenements&id_events={{ ev.id_events }}"> 
      <img src="images/{{ ev.photo }}" width="100%" height="auto" alt="{{ ev.alt }}"> 
     </a> 
     </div> 
    {% endfor %} 
    </div> 
</div> 
<div class="next">Next</div> 
<div class="prev">Prev</div> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> 

<script src="JS/carousel.js"></script> 

そして、これはCSSです：

.containerc { 
    margin: 0 auto; 
    margin-top: 12vh; 
    margin-bottom: 19vh; 
    width: 250px; 
    height: 200px; 
    position: relative; 
    perspective: 1000px; 
} 

.carousel1 { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    transition: transform 1s; 

} 


.item1 { 
    display: block; 
    position: absolute; 
    background: #000; 
    width: 250px; 
    height: 200px; 
    line-height: 200px; 
    font-size: 5em; 
    text-align: center; 
    color: #FFF; 
    opacity: 0.95; 
    border-radius: 10px; 
} 

.item1:nth-child(1) { 
    transform: rotateY(0deg) translateZ(250px); 
    background: transparent; 
} 
.item1:nth-child(2) { 
    transform: rotateY(60deg) translateZ(250px); 
    background: transparent; 
} 
.item1:nth-child(3) { 
    transform: rotateY(120deg) translateZ(250px); 
    background: transparent; 
} 
.item1:nth-child(4) { 
    transform: rotateY(180deg) translateZ(250px); 
    background: transparent; 
} 
.item1:nth-child(5) { 
    transform: rotateY(240deg) translateZ(250px); 
    background: transparent; 
} 
.item1:nth-child(6) { 
    transform: rotateY(300deg) translateZ(250px); 
    background: transparent; 
} 

とJavaスクリプトファイル：私はそれを行う方法を検索しました

var carousel = $(".carousel1"), 
    currdeg = 0; 

$(".next").on("click", { d: "n" }, rotate); 
$(".prev").on("click", { d: "p" }, rotate); 

function rotate(e){ 
    if(e.data.d=="n"){ 
    currdeg = currdeg - 60; 
    } 
    if(e.data.d=="p"){ 
    currdeg = currdeg + 60; 
    } 
    carousel.css({ 
    "-webkit-transform": "rotateY("+currdeg+"deg)", 
    "-moz-transform": "rotateY("+currdeg+"deg)", 
    "-o-transform": "rotateY("+currdeg+"deg)", 
    "transform": "rotateY("+currdeg+"deg)" 
    }); 
} 

が、私はcouldn何も見つけられません。 CSSでやる方法はありますか？ もしそうでなければ、私はJava Scriptでそれを行うべきだと思いますが、Java Scriptをどうやってやったのか分かりません。

Answer 1

申し訳ありませんが、jQuery（brainfart）を使用していたことに気付きませんでした。これを試してみてください：

$(document).ready(function() { 
    initApplication();//DOM is ready to be edited 
}); 
//set up our page 
    function initApplication(){ 
     var items = $('.carousel1 .item1');//gets an array of each element with the "item1" class contained in a container with the "carousel1" class 
     var numItems = items.length;//gets the number of items in the array 
     var increment = 360/numItems;//gets the increment in degrees (60 for 6 items, 120 for 3, etc) 

     //loop through each element in the array 
     for(var i = 0; i < numItems; i++){ 
      //apply the increment to each element. example output for 6 items: 0,60,120,180,240,300 
      items.eq(i).css("transform", "rotateY(" + (i*increment) + "deg) translateZ(250px)"); 
     } 
    } 

     //rest of js 

これはあなたが持っている任意のCSSを上書きすると、基本的に私たちがやっているすべての変換を適用している360にうまく分割しないよりも、それは7つの項目または任意の他の数のビット奇妙な動作をする可能性がありますページがjsで編集できる状態になったらjs経由でインラインスタイルとして

Working JSFiddle