🔄 3. Transforming a Card Collection into a 3D Continuous Carousel with CSS

Community Resources
, ,
1

This is the third way to transform a collection component into a carousel. The following method uses transform-style: preserve-3d; to shape the collection component into a ring, enabling a smooth transition from the last frame to the first frame continuously. You can see the intentionally reduced opacity preview below.

As before, I am still using 6 image cards as an example. If you have different image cards, you only need to adjust the width of the ‘horizontal-collection-container’ code block and the value of ‘transform: rotateY(ndeg) translateZ(dpx);’.

Enjoy your carousel.

ezgif.com-animated-gif-maker

Class name: ring-slide

/*Clip Frame*/
#page-root .ring-slide {
    display: block;
    width: 500px;
    left: 50%;
    margin-bottom:16px;
    height:250px;
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid white;
    border-radius: 10px;
}

#page-root .ring-slide [data-testid="horizontal-collection-container"] {
    width: 350px !important;
    overflow: visible;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: spin 12s infinite linear;
}

#page-root .ring-slide [data-testid="horizontal-collection-container"] [data-testid="cc-card"] {
    position: absolute;
    width: 100% !important;
    height:auto;
    border-radius: 0.5rem !important;
    border: 1px solid white;
    -webkit-border-radius: 12px;
    -webkit-box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-transition: -webkit-transform 2s, opacity 2s;
    backface-visibility: visible;
    /*backface-visibility: hidden;*/
}

/*Remove text area*/
.ring-slide .image-style-rectilinear.grid {
display: none;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0);}
    to   { -webkit-transform: rotateY(-360deg); }
}
@keyframes spin {
    from { transform: rotateY(0); }
    to   { transform: rotateY(-360deg); }
}

.ring-slide [data-testid="cc-card"]:nth-child(1) { 
    opacity: 0.8; 
    transform: rotateY(0deg) translateZ(300px); 
}
.ring-slide [data-testid="cc-card"]:nth-child(2) { 
    opacity: 0.8; 
    transform: rotateY(60deg) translateZ(300px); 
}
.ring-slide [data-testid="cc-card"]:nth-child(3) { 
    opacity: 0.8; 
    transform: rotateY(120deg) translateZ(300px); 
}
.ring-slide [data-testid="cc-card"]:nth-child(4) { 
    opacity: 0.8; 
    transform: rotateY(180deg) translateZ(300px); 
}
.ring-slide [data-testid="cc-card"]:nth-child(5) { 
    opacity: 0.8; 
    transform: rotateY(240deg) translateZ(300px); 
}
.ring-slide [data-testid="cc-card"]:nth-child(6) { 
    opacity: 0.8; 
    transform: rotateY(300deg) translateZ(300px); 
}

Update

ezgif.com-optimize (1)

If you want to overlay text on a card and pause the animation at each frame, use the following example code:

/*Text Position*/
.ring-slide .image-style-rectilinear.grid {
position: absolute;/*Overlay text*/
display: flex;/*Overlay text*/
bottom:0px;/*Overlay text*/
padding-left: 15px;
width:100%;
background-color:rgba(0,0,0,0.5);
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  8.33% {
    transform: rotateY(0deg);
  }
  16.67% {
    transform: rotateY(-60deg);
  }
  25% {
    transform: rotateY(-60deg);
  }
  33.33% {
    transform: rotateY(-120deg);
  }
  41.67% {
    transform: rotateY(-120deg);
  }
  50% {
    transform: rotateY(-180deg);
  }
  58.33% {
    transform: rotateY(-180deg);
  }
  66.67% {
    transform: rotateY(-240deg);
  }
  75% {
    transform: rotateY(-240deg);
  }
  83.33% {
    transform: rotateY(-300deg);
  }
  91.67% {
    transform: rotateY(-300deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

Showcase

The following example is just a showcase using 12 cards to form a cube resembling a tesseract. However, I'm not sharing the code here, as this is too far from transforming a collection component. It's best done with regular HTML and CSS.

ezgif.com-optimize

Compare with:

:film_strip:  1. How to Create an Auto-Play Slideshow
:film_strip: 2. Transforming Card Collection into a Slide-In Carousel with CSS

6 Likes
2

the revolving cube is beautiful!

1 Like
3

Do you want to use it in your application?

1 Like
4

I would love to! I’d have to work out where it would be best utilized but i’ve always loved rotating cubes as a visual element.

5

I’ll send it to you in a moment.

1 Like