rxslider

≺

≻

rxslider__active

    .rxslider__active {
      transform: scale(1.2) rotate(5deg);
    }
  

≺

≻

rxslider--one

    .rxslider--one {
      --transition: all 2s;
      --transform: rotate(0) scale(.1);
      --transform-origin: 80% 20%;
      --opacity: .1;

      transform: rotate(360deg) scale(1);
      opacity: 1;
    }
  

≺

≻

rxslider--two

    .rxslider--two {
      --parent-perspective: 400px;
      --transition: all 2s;
      --transform: rotateX(0) scale(0);

      transform: rotateX(360deg) scale(1);
    }
  

≺

≻

rxslider--three

    .rxslider--three {
      --child-animation: three 3s infinite;
    }
    @keyframes three {
      0% {
        opacity: 0;
        transform: scale(1.5);
      }
      50% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1.5);
      }
    }
  

≺

≻