3D图像旋转轮播图jQuery效果

PetitQ 幻灯片/轮播 2018-11-08 2.48K 0 1

这是一款简单的 jquery 3d 旋转轮播图效果。该轮播图基于 bootstrap 网格系统，通过 jquery 和 CSS3 transforms 来制作 3D 旋转效果，非常炫酷。

使用方法

在页面中引入 bootstrap.min.css，style.css 和 jquery 文件。

也想出现在这里？联系我们吧

<link href="bootstrap.min.css" rel="stylesheet">

<link href="style.css" rel="stylesheet">

<script src="js/jquery.min.js" type="text/javascript"></script>

HTML 结构

该轮播图的 HTML 结构如下：

```
<div class="wrap">
```
```
  <section class="cube-container">
```
```
    <div id="cube">
```
```
      <figure class="front">
```

        <div class="col-md-8 col-sm-12" style="background-image: url('img/1.jpg');"></div>

        <div class="col-md-4" style="height:inherit;display:inline-block;">

```
      <article>
```

          <img src="img/profile.svg" alt="logo" class="mb-4">

```
      </article>  
```
```
         </div>
```
```
      </figure>
```
```
      <figure class="back">
```

      <div class="col-md-8" style="background-image:url('img/2.jpg');"></div>

        <div class="col-md-4" style="height:inherit;display:inline-block;">

```
          <article>
```

            <img src="img/profile.svg" alt="logo" class="mb-4">

```
 
```

          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>

```
          </article>
```
```
        </div>
```
```
      </figure>
```
```
      <figure class="right">
```

        <div class="col-md-8" style="background-image:url('img/3.jpg');"></div>

        <div class="col-md-4" style="height:inherit;display:inline-block;">

```
          <article>
```

            <img src="img/profile.svg" alt="logo" class="mb-4">

          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>

```
          </article>
```
```
        </div>
```
```
 
```
```
        </figure>
```
```
      <figure class="left">
```

        <div class="col-md-8" style="background-image:url('img/4.jpg');"></div>

        <div class="col-md-4" style="height:inherit;display:inline-block;">

```
          <article>
```

            <img src="img/profile.svg" alt="logo" class="mb-4">

          <p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>

```
          </article>
```
```
        </div>
```
```
      </figure>
```
```
      <figure class="top">5</figure>
```
```
      <figure class="bottom">6</figure>
```
```
    </div>
```
```
  </section>
```
```
 
```
```
</div>
```
```
 
```
```
<div class="button-wrap">
```

  <button class="previous">Previous</button>

```
  <button class="next">Next</button>  
```
```
</div>
```

JavaScript

在页面 DOM 元素加载完毕之后，通过下面的 js 代码来完成该轮播图的初始化。

```
var counter = 0;
```
```
$('.next').on('click', function(){
```
```
  counter -= 90;
```

  var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';

  $('#cube').css('transform', rotation);

```
});
```
```
$('.previous').on('click', function(){
```
```
  counter += 90;
```

  var rotation = 'translateZ( -50vw ) rotateY( ' + counter + 'deg )';

  $('#cube').css('transform', rotation);

```
});
```

3D 图像旋转轮播图 jQuery 效果

已有 620 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

3D图像旋转轮播图jQuery效果

使用方法

HTML 结构

JavaScript

3D 图像旋转轮播图 jQuery 效果

相关文章

流光溢彩Bootstrap响应式幻灯片特效

FlexSlider - 响应式jQuery幻灯片插件

超酷堆叠图片切换展示jQuery插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

HTML 结构

JavaScript

3D 图像旋转轮播图 jQuery 效果

相关文章

发表回复 取消回复

热销模板

发表回复取消回复