Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.

3D Transforms: Create carousel using Scroll Groups and Repeat Grids with perspective.

Adobe Employee ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard


Hi everyone,


One of the more popular cases for using 3D transforms is in using them to create Carousels. You must have seen them being used in sites such as Netflix and Spotify. In this tutorial, we will attempt to simulate such carousels using 3D transforms in XD, Repeat Grids, and Horizontal Scroll Groups.


scroll group.gif



Let's get started. 


Step 1: Add perspective to the container

  1. Create a square or rectangle.
  2. Enable transform and use the Y-axis gizmo to adjust the perspective.


Untitled picture.png Untitled picture2.png










Step 2: Apply repeat grid and horizontal scroll

  1. Apply a repeat grid to the rectangle
  2. Add photos to each of the rectangles in the grid
  3. Enable Horizontal scroll


Screenshot 2020-10-07 193334.png


Step 3: Create a carousel

  1. Duplicate the artboard
  2. In the duplicated artboard, ungroup the repeat grid.
  3. Select a square (tile), and in Transform settings set the y-axis to "0".
  4. Move it toward the center and the rest of the boxes towards it's right and left.
  5. Drag the Z-axis gizmo down (Z-axis = 240) to give depth to the tile. 
  6. Increase the size of the border for the box and fill with bright colors to highlight the box.
  7. Repeat the process for the rest of the squares/tiles.


Untitled picture4.png


Step 5: Use Auto-Animate to wire and animate the prototype

  • To make it work effectively, wire each tile with its corresponding highlighted artboard.
    Trigger= Tap; Action= Auto-Animate


Untitled picture5.png


Were you able to recreate the carousel using the procedure" Did you have any issues? Let us know by replying to this post.


Share your creations

We would love to see what you created. Reply to this post to share your creations.










Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation