CSS Only 3D Cube Slider

Category: CSS & CSS3 , Slider | September 7, 2022
Author:Temani Afif
Views Total:0 views
Official Page:Go to website
Last Update:September 7, 2022
License:MIT

Preview:

CSS Only 3D Cube Slider

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)}
}

You Might Be Interested In:


Leave a Reply