CSS 3D Carousel Ürün Rotasyon

Question

aşağıdaki CodePen yapmak istediğim şeyin yarısını gösterir: Bu atlıkarınca spin http://codepen.io/nopr/pen/rfBJx

gibi, birey, pasif öğeler arkasına doğru bakması dönmeye - seyirciden uzaklaşıyor dönük. onlar spin gibi bir do-si-do hareketi yerine bir dönüm hareketi (resme bakın) gerçekleştirirken, ben bakana dönük çerçevelerin her tutabilir anlamaya gibi olamaz. harfler hep size dönük nasıl

Bildirim? Bu yukarıdaki CodePen’den farklıdır.

Her uçağın yerini almaya Aşağıda, bu dönüşümler ile ek bir atlıkarınca ekleyerek denedim ama ne için hedefliyorum etkiyi elde edilemez. Düşüncesi olan var mı?

carousel.css({ 
    "-webkit-transform": "rotateY("+currdeg+"deg)", 
    "-moz-transform": "rotateY("+currdeg+"deg)", 
    "-o-transform": "rotateY("+currdeg+"deg)", 
    "transform": "rotateY("+currdeg+"deg)" 
}); 

Answer 1

Her öğe için, öğeyi döndürmeden koruyan, ancak tekerlek konumunda bir sarıcı oluşturdum.

Ve sonra, javascript, ben sadece ben * sen düşünmek * şeyin bir görüntü eklendi

var carousel = $(".carousel"), 
 
    items = $(".item"), 
 
    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)" 
 
    }); 
 
    items.css({ 
 
    "-webkit-transform": "rotateY("+(-currdeg)+"deg)", 
 
    "-moz-transform": "rotateY("+(-currdeg)+"deg)", 
 
    "-o-transform": "rotateY("+(-currdeg)+"deg)", 
 
    "transform": "rotateY("+(-currdeg)+"deg)" 
 
    }); 
 
}

body { 
 
    background: #333; 
 
    padding: 70px 0; 
 
    font: 15px/20px Arial, sans-serif; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    position: relative; 
 
    perspective: 1000px; 
 
} 
 

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

 
.item { 
 
    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; 
 
    transition: transform 1s; 
 
} 
 

 
.a { 
 
    transform: rotateY(0deg) translateZ(250px); 
 
} 
 
.a .item { 
 
    background: #ed1c24; 
 
} 
 
.b { 
 
    transform: rotateY(60deg) translateZ(250px) rotateY(-60deg); 
 
} 
 
.b .item { 
 
    background: #0072bc; 
 
} 
 
.c { 
 
    transform: rotateY(120deg) translateZ(250px) rotateY(-120deg); 
 
} 
 
.c .item { 
 
    background: #39b54a; 
 
} 
 
.d { 
 
    transform: rotateY(180deg) translateZ(250px) rotateY(-180deg); 
 
} 
 
.d .item { 
 
    background: #f26522; 
 
} 
 
.e { 
 
    transform: rotateY(240deg) translateZ(250px) rotateY(-240deg); 
 
} 
 
.e .item { 
 
    background: #630460; 
 
} 
 
.f { 
 
    transform: rotateY(300deg) translateZ(250px) rotateY(-300deg); 
 
} 
 
.f .item { 
 
    background: #8c6239; 
 
} 
 

 
.next, .prev { 
 
    color: #444; 
 
    position: absolute; 
 
    top: 100px; 
 
    padding: 1em 2em; 
 
    cursor: pointer; 
 
    background: #CCC; 
 
    border-radius: 5px; 
 
    border-top: 1px solid #FFF; 
 
    box-shadow: 0 5px 0 #999; 
 
    transition: box-shadow 0.1s, top 0.1s; 
 
} 
 
.next:hover, .prev:hover { color: #000; } 
 
.next:active, .prev:active { 
 
    top: 104px; 
 
    box-shadow: 0 1px 0 #999; 
 
} 
 
.next { right: 5em; } 
 
.prev { left: 5em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="carousel"> 
 
    <div class="a"> 
 
    <div class="item">A</div> 
 
    </div> 
 
    <div class="b"> 
 
    <div class="item">B</div> 
 
    </div> 
 
    <div class="c"> 
 
    <div class="item">C</div> 
 
    </div> 
 
    <div class="d"> 
 
    <div class="item">D</div> 
 
    </div> 
 
    <div class="e"> 
 
    <div class="item">E</div> 
 
    </div> 
 
    <div class="f"> 
 
    <div class="item">F</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="next">Next</div> 
 
<div class="prev">Prev</div>