CSS Only 3D Cube Slider

Preview:

Description:

Since the CSS 3D transforms became widely supported, many websites have tried to recreate widespread transition effects by using nothing but CSS. This is one of them.

Here is a slick and smooth cube-style 3D image slider that can be easily adapted and reused in your project. It uses pure CSS3 transforms and animations to achieve the cube look, without using any JavaScript or SVG graphics.

How to use it:

1. Add images to the 3D cube slider.

<div class="slider">
  <img src="1.jpg" alt="Alt 1" />
  <img src="2.jpg" alt="Alt 1" />
  <img src="3.jpg" alt="Alt 1" />
  <img src="4.jpg" alt="Alt 1" />
  <img src="5.jpg" alt="Alt 1" />
  <img src="6.jpg" alt="Alt 1" />
</div>

2. The main CSS styles for the slider & images.

.slider {
  --s: 250px; /* cube size */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.slider img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
}
.slider img:nth-child(2) {--_t: rotateX(-90deg)}
.slider img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.slider img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.slider img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.slider img:nth-child(6) {--_t: rotateY(-90deg)}

3. Enable the auto-rotate effect.

@keyframes r {
  0%,3%   {transform: var(--_p) rotateX( 0deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  14%,19% {transform: var(--_p) rotateX(90deg) rotate( 0deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(  0deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX( 0deg) rotate( 0deg) rotateY(  0deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate( 0deg) rotateY(  0deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(  0deg)}
  97%,to  {transform: var(--_p) rotateX(90deg) rotate(90deg) rotateY(-90deg) rotateX(90deg) rotate(90deg) rotateY(-90deg)}
}