3D cube rotation

Slides rotate around a shared Y-axis as if they were faces of a cube. Built with creativeEffect using rotateY + translateX transforms and CSS perspective. The key is overflow: visible on the container so the side faces are visible during the rotation, and perspective: true to activate 3D rendering.

View code

<div class="c--slider-a c--slider-a--effect c--slider-a--cube" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }

/* Effect layout: stacked absolute slides */
.c--slider-a--effect { height: 260px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.c--slider-a--effect .c--slider-a__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* Cube-specific: reveal side faces */
.c--slider-a--cube { perspective: 1200px; overflow: visible; }
.c--slider-a--cube .c--slider-a__slide {
  transition: transform 0.6s ease;
  backface-visibility: hidden;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &--effect {
    height: 260px;
  }

  &--effect .c--slider-a__wrapper {
    height: 100%;
  }

  &--effect .c--slider-a__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  &--cube {
    perspective: 1200px;
    overflow: visible;
  }

  &--cube .c--slider-a__slide {
    transition: transform 0.6s ease;
    backface-visibility: hidden;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { creativeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 600,
  plugins: [
    creativeEffect({
      prev:   { rotate: [0, -90, 0], translate: ['-50%', 0, 0] },
      active: { rotate: [0,   0, 0], translate: [0, 0, 0] },
      next:   { rotate: [0,  90, 0], translate: ['50%', 0, 0] },
      perspective: true,
    }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Cube with autoplay

The cube effect pairs well with autoplay — the continuous rotation creates a satisfying looping display. Use loop: true so the cube keeps spinning indefinitely. Increase speed to 800ms for a more cinematic feel.

View code

<div class="c--slider-a c--slider-a--effect c--slider-a--cube" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }

.c--slider-a--effect { height: 260px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.c--slider-a--effect .c--slider-a__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.c--slider-a--cube { perspective: 1200px; overflow: visible; }
.c--slider-a--cube .c--slider-a__slide {
  transition: transform 0.8s ease;
  backface-visibility: hidden;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &--effect {
    height: 260px;
  }

  &--effect .c--slider-a__wrapper {
    height: 100%;
  }

  &--effect .c--slider-a__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  &--cube {
    perspective: 1200px;
    overflow: visible;
  }

  &--cube .c--slider-a__slide {
    transition: transform 0.8s ease;
    backface-visibility: hidden;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, autoplay } from '@andresclua/sliderkit-plugins'
import { creativeEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: true,
  speed: 800,
  plugins: [
    creativeEffect({
      prev:   { rotate: [0, -90, 0], translate: ['-50%', 0, 0] },
      active: { rotate: [0,   0, 0], translate: [0, 0, 0] },
      next:   { rotate: [0,  90, 0], translate: ['50%', 0, 0] },
      perspective: true,
    }),
    autoplay({ delay: 2500, pauseOnHover: true }),
    arrows(),
  ],
})