CSS 3D carousel rotation

Question

The following CodePen demonstrates half of what I want to do: http://codepen.io/nopr/pen/rfBJx

When this carousel rotates, individual, inactive objects rotate face to back, facing away from the viewer. I cannot understand how I can keep each of the frames facing the viewer as they rotate, performing a do-si-do movement instead of a rotation (see. Image).

Please note that letters are always addressed to you? This is not like CodePen above.

I tried to add an extra carousel with these conversions below to take the place of each aircraft, but I can’t achieve the effect I was aiming for. Any thoughts?

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

Answer 1

I created a wrapper for each element that keeps the element irreversible, but in the position of the wheel.

And then, in javascript, I rotate the elements of the counter so that I can then look at the viewer

 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>