3d滑动轮播图

下载代码

html

css

分享到微信朋友圈

html

css

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

JavaScript

"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();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg