3D Random Image Slider In Pure CSS

Preview:

Description:

A CSS solution for transitioning between images in a 3D space, just like a cube. It is made using only CSS/CSS3, so you don’t need to worry about including any additional libraries or dependencies in your project.

How to use it:

1. Add 6 images to the 3D cube slider.

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

2. The necessary CSS styles.

.mySlider {
  --s: 250px; /* cube size */
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5);
}
.mySlider img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s)/2));
}
.mySlider img:nth-child(2) {--_t: rotateX(-90deg)}
.mySlider img:nth-child(3) {--_t: rotateY( 90deg)}
.mySlider img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.mySlider img:nth-child(5) {--_t: rotateX( 90deg)}
.mySlider img:nth-child(6) {--_t: rotateY(-90deg)}
@keyframes r {
  0%,3%   {transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
  14%,19% {transform: var(--_p) rotate3d(-1, 1, 0, 180deg)}
  31%,36% {transform: var(--_p) rotate3d(0, -1, 0, 90deg)}
  47%,52% {transform: var(--_p) rotate3d(1, 0, 0, 90deg)}
  64%,69% {transform: var(--_p) rotate3d(1, 0, 0, -90deg)}
  81%,86% {transform: var(--_p) rotate3d(0, 1, 0, 90deg)}
  97%,100%{transform: var(--_p) rotate3d(0, 0, 0, 0deg)}
}