炫酷3D透视轮播图特效

这是一款炫酷js和CSS3 3D透视轮播图特效。该3D轮播图通过CSS3制作图片的3D透视效果，并使用js来使轮播图于用户进行交互，效果非常炫酷。

使用方法

在页面中引入style.css和index.js文件。

<link href="css/style.css" rel="stylesheet">
<script src="js/index.js"></script>
                

HTML结构

该3D轮播图的基本HTML结构如下：

<div class="slider" id="slider" style="--img-prev:url(img/1.jpg)"> 
  <div class="slider__content" id="slider-content">
    <div class="slider__images">
      <div class="slider__images-item slider__images-item--active" data-id="1"><img src="img/1.jpg"/></div>
      <div class="slider__images-item" data-id="2"><img src="img/2.jpg"/></div>
      <div class="slider__images-item" data-id="3"><img src="img/3.jpg"/></div>
      <div class="slider__images-item" data-id="4"><img src="img/4.jpg"/></div>
      <div class="slider__images-item" data-id="5"><img src="img/5.jpg"/></div>
    </div>
    <div class="slider__text">
      <div class="slider__text-item slider__text-item--active" data-id="1">
        <div class="slider__text-item-head">
          <h3>Forest</h3>
        </div>
        <div class="slider__text-item-info">
          <p>“And into the forest I go, to lose my mind and find my soul”</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="2">
        <div class="slider__text-item-head">
          <h3>Lake</h3>
        </div>
        <div class="slider__text-item-info">
          <p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="3">
        <div class="slider__text-item-head">
          <h3>Cliffs</h3>
        </div>
        <div class="slider__text-item-info">
          <p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="4">
        <div class="slider__text-item-head">
          <h3>Mountains</h3>
        </div>
        <div class="slider__text-item-info">
          <p>“What are men to rocks and mountains?”</p>
        </div>
      </div>
      <div class="slider__text-item" data-id="5">
        <div class="slider__text-item-head">
          <h3>Peaks</h3>
        </div>
        <div class="slider__text-item-info">
          <p>“On all the peaks lies peace”</p>
        </div>
      </div>
    </div>
  </div>
  <div class="slider__nav">
    <div class="slider__nav-arrows">
      <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
      <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
    </div>
    <div class="slider__nav-dots" id="slider-dots">
      <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
      <div class="slider__nav-dot" data-id="2"></div>
      <div class="slider__nav-dot" data-id="3"></div>
      <div class="slider__nav-dot" data-id="4"></div>
      <div class="slider__nav-dot" data-id="5"></div>
    </div>
  </div>
</div>               
                

由于该3D轮播图采用es6和css变量等多种最新的技术，所以不是所有的浏览器都支持这个特效。

相关插件

js动感水平拖拽式轮播图特效

js扑克堆叠式卡片轮播图插件

js堆叠卡片轮播图插件stackedCards

jQuery和CSS3堆叠式轮播图特效