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

**URL:** <https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [May 22, 2024, 5:36am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558 "2024-05-22T05:36:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 22, 2024, 5:36am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558/1 "2024-05-22T05:36:18Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/81ae3b4b38a41a737b2f2dba73e78ec06ebc84c4.gif)

Class name: **ring-slide**

```auto
/*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)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cf447a57a034e447492acd9292d8d3472806ef25.gif)

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

```auto
/*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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c92cecea1244b561b3c36bd688ef62f37971ea0d.gif)

Compare with:

> **[🎞 &nbsp;1. How to Create an Auto-Play Slideshow](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271)**  
> **[🎞 2. Transforming Card Collection into a Slide-In Carousel with CSS](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400)**

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 26, 2024, 5:24am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558/2 "2024-05-26T05:24:46Z")

</div>

the revolving cube is beautiful!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 26, 2024, 5:33am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558/3 "2024-05-26T05:33:36Z")

</div>

Do you want to use it in your application?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 26, 2024, 5:40am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558/4 "2024-05-26T05:40:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 26, 2024, 5:42am UTC](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558/5 "2024-05-26T05:42:21Z")

</div>

I’ll send it to you in a moment.