<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.0/dist/aqua.min.css'>

<div class="tip">Use your finger to swipe it up and down :)</div>

<div class="swiper"></div>

<div class="camera">

  <div class="d-carousel">

    <!-- 图片可任意增减，无需调节其他参数 -->

    <img src="https://picsum.photos/id/1/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/2/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/3/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/4/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/5/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/6/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/7/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/8/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/9/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/10/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/11/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/12/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/13/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/14/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/15/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/16/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/17/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/18/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/19/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/20/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/21/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/22/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/23/200/300" alt="" class="d-carousel-item">

    <img src="https://picsum.photos/id/24/200/300" alt="" class="d-carousel-item">

  </div>

</div>

<!-- partial -->

<script src='https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>

body {

  display: -webkit-box;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

          flex-direction: column;

  -webkit-box-pack: center;

          justify-content: center;

  -webkit-box-align: center;

          align-items: center;

  height: 100vh;

  background: #f7f7fd;

  margin: 0;

}

​

.swiper {

  position: absolute;

  width: 120px;

  height: 468px;

  cursor: pointer;

}

​

.camera {

  --d-carousel-item-gap: 5px;

  --d-carousel-transition: 0.3s;

  --d-carousel-perspective: 250px;

  --d-carousel-rotate-x: 0;

  --d-carousel-translate-z: -100px;

  --d-carousel-item-width: 45px;

  --d-carousel-item-height: 45px;

  --d-carousel-item-gap-double: calc(var(--d-carousel-item-gap) * 2);

  --camera-width: calc(

    var(--d-carousel-item-width) + var(--d-carousel-item-gap-double)

  );

  --camera-height: calc(

    var(--d-carousel-item-height) + var(--d-carousel-item-gap-double)

  );

  position: relative;

  width: var(--camera-width);

  height: var(--camera-height);

  -webkit-perspective: var(--d-carousel-perspective);

          perspective: var(--d-carousel-perspective);

  pointer-events: none;

}

.camera .d-carousel {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-transform: translateZ(var(--d-carousel-translate-z)) rotateX(var(--d-carousel-rotate-x));

          transform: translateZ(var(--d-carousel-translate-z)) rotateX(var(--d-carousel-rotate-x));

  -webkit-transition: var(--d-carousel-transition);

  transition: var(--d-carousel-transition);

  pointer-events: none;

}

.camera .d-carousel-item {

  --d-carousel-item-rotate-x: calc(var(--i) * var(--d-carousel-item-deg));

  --d-carousel-item-translate-z: var(--d-carousel-item-r);

  position: absolute;

  left: var(--d-carousel-item-gap);

  top: var(--d-carousel-item-gap);

  width: var(--d-carousel-item-width);

  height: var(--d-carousel-item-height);

  border-radius: 5px;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  pointer-events: none;

  -webkit-transform: rotateX(var(--d-carousel-item-rotate-x)) translateZ(var(--d-carousel-item-translate-z));

          transform: rotateX(var(--d-carousel-item-rotate-x)) translateZ(var(--d-carousel-item-translate-z));

}

​

.tip {

  position: absolute;

  top: 4rem;

}

"use strict";

var getTanFromDegrees = function (deg) { return Math.tan((deg * Math.PI) / 180); };

var camera = document.querySelector(".camera");

var cameraHeight = camera.offsetHeight;

var swiper = document.querySelector(".swiper");

var swiperHeight = swiper.offsetHeight;

var dCarousel = document.querySelector(".d-carousel");

var dCarouselItems = dCarousel.children;

var dCarouselItemCount = dCarouselItems.length;

var dCarouselItemDeg = 360 / dCarouselItemCount;

var dCarouselItemTanDegHalf = Math.tan(getTanFromDegrees(dCarouselItemDeg / 2));

var dCarouselItemR = cameraHeight / 2 / dCarouselItemTanDegHalf;

dCarousel.style.setProperty("--d-carousel-item-r", dCarouselItemR + "px");

dCarousel.style.setProperty("--d-carousel-item-deg", dCarouselItemDeg + "deg");

Array.from(dCarouselItems).forEach(function (item, i) {

    return item.style.setProperty("--i", "" + i);

});

var swipeDeg = 0;

var previousDeltaY = 0;

var deltaYDelta = 0;

var manager = new Hammer.Manager(swiper);

var Pan = new Hammer.Pan({ threshold: 10 });

manager.add(Pan);

manager.on("pan", function (e) {

    var deltaY = e.deltaY;

    deltaYDelta = deltaY - previousDeltaY;

    previousDeltaY = deltaY;

    var direction = e.offsetDirection;

    if (direction === 8 || direction === 16) {

        var swipeDegDelta = (deltaYDelta / swiperHeight) * 360;

        swipeDeg -= swipeDegDelta;

        dCarousel.style.setProperty("--d-carousel-rotate-x", swipeDeg + "deg");

    }

    if (e.isFinal) {

        previousDeltaY = 0;

    }

});

var disableTouchMove = function () {

    document.body.addEventListener("touchmove", function (e) {

        e.preventDefault();

    }, { passive: false });

};

disableTouchMove();