How to create 3D carousel ? (Rework Sketch.com)

Design help General
1

Hi guys!

We are building the website for our own Start-up. We have foreseen right after our Hero-Section a place to show a “Image Carousel” of 4 screenshots of our app.

Our inspiration is the homepage of www.sketch.com. After their hero image, they have put a very nice way of showing their screenshots.

Question: How can did they do this? They seem to do 2 things:

  • Screenshot #1 starts in focus, whereas Screenshot #2, Screenshot#3 and Screenshot 4 are blurred out, and stacked behind. >> OK! I can manage that.
  • They have a automatic timed animation that spins the screenshots. >> OK: I have setup a timed trigger on page load.
  • Now: they also move screenshot #2 (which was first behind screenshot 2), to be in front of screenshot #1. >> Not sure how they do that.

I tried putting the two same screenshots on the same z-index, and that play with 3D transformation and depth, but this doesn’t change stacking order.

Here is my public share link: https://preview.webflow.com/preview/climatecamp?utm_medium=preview_link&utm_source=designer&utm_content=climatecamp&preview=4a44c254426a305e266d2856db381e05&workflow=preview

Here is live website: https://climatecamp.webflow.io/

Screenshot from Sketch Website:

image
image1920×482 54.7 KB

2

Hi @Stijn_in_space it is basic 3D carousel just search for more info on net. Beside articles and libraries you may find some examples on CodePen.

etc. etc. :wink:

3

Thanks. How would you this in webflow?

It seems to use radio buttons as sliders ?

4

I have found a solution.
This works only when you add custom css at parent level. No custom javascript or anything… :slight_smile:

<style>
#parent{
transform-style:preserve-3D;
}
</Style>
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.