3D cube animation transition with more than four elements - css

Question

I try to create an animation like the animation on mac for a carousel.
I tried to use a 3D cube as the base, but I don't find a way to ad more than four elements in the carousel without broke the animation.
.wrap {
perspective: none;
perspective-origin: 0 0;
margin: 0 auto;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border-style: solid;
border-color: black;
background-color: blue;
opacity: 1;
color : white;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
transform: translateZ(100px);
}
#keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
}
}
.cube {
animation: spin 5s infinite linear;
}
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
i try This code : https://jsfiddle.net/Goby03/jxm8c2ob/

Answer 1

I make 3D cube animation like this one:
.stage {
width: 120px;
height: 120px;
}
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
#keyframes spincube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
.cubespinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: blue;
line-height: 120px;
text-align: center;
font-size: 100px;
color: #fff;
}
.cubespinner .face1 {
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.cubespinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.cubespinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.cubespinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-moz-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
<div class="stage">
<div class="cubespinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>
UPDATE
Hope it's what you're looking for.
$(document).ready(function(){
var carouselCustomeTemplateProps = {
width: 400, /* largest allowed width */
height: 300, /* largest allowed height */
slideLayout : 'fill', /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
animation: 'slide3D', /* slide | scroll | fade | zoomInSlide | zoomInScroll */
animationCurve: 'ease',
animationDuration: 1900,
animationInterval: 2000,
slideClass: 'jR3DCarouselCustomSlide',
autoplay: true,
controls: true, /* control buttons */
navigation: '' /* circles | squares | '' */,
perspective: 200,
rotationDirection: 'ltr',
onSlideShow: slideShownCallback
}
function slideShownCallback($slide){
$slide.find('img').attr('src')
}
jR3DCarouselCustomeTemplate = $('.jR3DCarouselGalleryCustomeTemplate').jR3DCarousel(carouselCustomeTemplateProps);
})
.jR3DCarouselGalleryCustomeTemplate {
margin: 0 auto;
}
.jR3DCarouselGalleryCustomeTemplate .captions{
position: relative;
padding: 4px 0;
bottom: 27px;
background: #000;
color: #fff;
display:block;
text-align: center
}
.jR3DCarouselGalleryCustomeTemplate a{
text-decoration: none;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v1.0.0/dist/jR3DCarousel.min.js"></script>
</head>
<div class="container">
<div class="jR3DCarouselGalleryCustomeTemplate">
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 1</div>
</div>
<div class="jR3DCarouselCustomSlide">
<a href="http://vinayakjadhav.github.io/jR3DCarousel/" target="_blank">
<img src="https://picsum.photos/600/450?image=839" />
<span class="captions">This is clickable slide 2</span>
</a>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=823" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=836" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=832" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=837" />
<div class="captions">This is custom text slide 5</div>
</div>
</div>
</div>