CSS三维图片旋转轮播

下载代码

html

css

分享到微信朋友圈

html

css

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #2e2d31;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wrapper-3d {
  position: relative;
  perspective: 250px;
  transform-style: preserve-3d;
}

.image {
  height: 175px;
  width: 300px;
}

.carousel-wrapper {
  overflow: hidden;
  width: 60vw;
  height: 80vh;
}

.carousel-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-out;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

/* The trick is to position them on their respective side
   Then set transform-origin to that siede
   And put desired angle 
*/
.left-3d {
  position: absolute;
  transform-origin: right center;
  transform: rotateY(100deg);
  top: 0;
  bottom: 0;
  right: calc(100%);
}

#left {
  transform: translateX(0%);
}

#center {
  transform: translateX(-100%);
}

.right-3d {
  position: absolute;
  transform-origin: left center;
  transform: rotateY(-100deg);
  top: 0;
  bottom: 0;
  left: calc(100%);
}

#right {
  transform: translateX(-200%);
}

.first, .second, .third {
  background-size: cover;
}

.first {
  background-image: url("https://picsum.photos/id/179/1355/897");
}

.second {
  background-image: url("https://picsum.photos/id/176/1355/897");
  background-position-y: 50%;
}

.third {
  background-image: url("https://picsum.photos/id/169/1355/897");
  background-position-y: 50%;
}

.debug {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 1.10em;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  font-weight: 200;
  margin: 0;
  margin-top: 10px;
  color: #fafafaee;
}
.debug-top {
  top: 2vh;
}
.debug-bot {
  bottom: 2vh;
}

.fa {
  font-size: 15rem;
  color: #fafafa99;
  line-height: 20px;
}

@media only screen and (min-width: 1600px) {
  .right-3d {
    transform: none;
    transform: rotateY(-120deg);
  }

.left-3d {
    transform: none;
    transform: rotateY(120deg);
  }
}

JavaScript

/*
  3d Carousel with set-width carousel.
 It's just 3 different views of the carousel.
 The side items have rotation with transition-origin on their respective edge
 And everything is wrapped by a perspective wrapper
  For set-width images with auto-width carousel check:
  **link**
*/
// width - padding = min
// padding = max
const padding = 200;
const slidesCount = 3 - 1;
function map(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
document.addEventListener('mousemove', (e)=>{
  // Change to bodywidth
  const wrapper = document.getElementById('wrapper')
  const rect = wrapper.getBoundingClientRect();
  // Mouse position in between padding
  const mouseX = Math.min(Math.max(e.clientX - padding,0),rect.width - padding * 2);
  const rawPercent = map(mouseX, 0, rect.width - padding * 2, 100 - 100 * slidesCount, 100);
  const percent = Math.round(rawPercent)
  const left = document.getElementById('left');
  const center = document.getElementById('center');
  const right = document.getElementById('right');
  left.style.transform = `translateX(${percent}%)`;
  center.style.transform = `translateX(${percent - 100}%)`;
  right.style.transform = `translateX(${percent - 200}%)`;
  //debug
  const paragraph = document.getElementById('t');
  paragraph.innerHTML = percent;
})

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