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

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

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

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

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

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

幻灯片/轮播

首页 _ 全部文章 _ Code/特效 _ 幻灯片/轮播 _ 正文

jQuery+CSS3带控制按钮3D旋转木马特效

PetitQ 幻灯片/轮播 2018-11-06 2.78K 0 0

收藏

阿里云

这是一款非常简单的带前后控制按钮的 jQuery 和 CSS3 3D 旋转木马特效。该旋转木马特效使用 CSS3 3D transforms 属性来渲染一个 3D 立体旋转木马，并通过简单的 jQuery 代码来控制旋转木马的旋转动画。

HTML 结构:

该 3D 旋转木马的 HTML 结构如下，其中

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

创客主机

元素是前后导航按钮。

```
<div id="carousel">
```

    <div id="container" tcc-rotation="0">

        <item><img src="img/1.jpg"></item>

        <item><img src="img/2.jpg"></item>

        <item><img src="img/3.jpg"></item>

        <item><img src="img/4.jpg"></item>

        <item><img src="img/5.jpg"></item>

        <item><img src="img/6.jpg"></item>

```
    </div>
```
```
 
```
```
    <nav class="tc-btn-container">
```
```
        <div class="tc-next">NEXT</div>
```
```
        <div class="tc-prev">PREV</div>
```
```
    </nav>
```
```
</div>
```

CSS 样式:

需要为该 3D 旋转木马特效添加以下的一些 CSS 样式。由于 IE 浏览器不支持 transform-style: preserve-3d;属性，所以在 IE 浏览器中是看不到 3D 透视效果的。

```
#carousel {
```
```
  display: block;
```
```
  height: auto;
```
```
  margin: 0 auto;
```
```
  -webkit-perspective: 80px;
```
```
  perspective: 800px;
```
```
  position: relative;
```
```
  top: 200px;
```
```
  width: 800px;
```
```
}
```
```
 
```
```
#container {
```
```
  display: block;
```
```
  height: 200px;
```
```
  margin: 0 auto;
```
```
  transform: rotateY(0deg);
```

  -webkit-transform-origin: center bottom 0;

```
  transform-origin: center bottom 0;
```
```
  -webkit-transform-style: preserve-3d;
```
```
  transform-style: preserve-3d;
```

  -webkit-transition: all 1s ease-in-out;

JavaScript:

在页面初始化完毕之后，可以通过下面的代码来激活该 3D 旋转木马插件。

```
$(document).ready(function($){
```
```
 
```
```
  var crotation;
```
```
  var rotateto = 0;
```
```
  var halfrotation = 180;
```
```
 
```
```
  function tcRotate(deg){  
```
```
      $('#container').css({
```

          'transform'         : 'rotateY('+ deg +'deg)',

          '-webkit-transform' : 'rotateY('+ deg +'deg)'

```
      });
```
```
  }
```
```
 
```
```
  $('item').on('click', function(e){
```
```
      e.preventDefault();
```
```
 
```

      crotation = $('#container').attr('tcc-rotation');

      rotation = $(this).attr('tc-rotation');

```
      rotateto = crotation - rotation;
```
```
      tcRotate(rotateto);
```
```
      crotation = rotateto;
```
```
 
```
```
  });
```
```
 
```

  $('.tc-next').on('click', function(e){

```
      e.preventDefault();
```
```
      rotateto -= 60;
```
```
      tcRotate(rotateto);
```
```
  });
```

  $('.tc-prev').on('click', function(e){

```
      e.preventDefault();
```
```
      rotateto += 60;
```
```
      tcRotate(rotateto);
```
```
  });
```
```
 
```
```
});
```

github 地址：https://github.com/marffinn/jQuery-CSS-Carousel

jQuery+CSS3 带控制按钮 3D 旋转木马特效

已有 695 人购买

永久更新：
演示数据：

1

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

创客云

基于GSAP全屏背景图片jQuery幻灯片插件

仿智能电视APP应用滑动幻灯片jQuery插件

相关文章

React.js 淡入淡出相册切换动画轮播

幻灯片/轮播 3 年前 1.41K
TremulaJS - 无限循环旋转木马轮播插件

幻灯片/轮播 6 年前 2.20K
js和CSS3炫酷图片画廊插件

图片/图形, 幻灯片/轮播 6 年前 2K

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

0%

这周已经过去0天

0%

本月已经过去0天

0%

今年已经过去0个月

0%

热门文章

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 6 年前 5.75K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 8 年前 1.42W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

DUX-PRO创客云开发版WordPerss中文主题

DUX-PRO创客云开发版WordPerss中文主题

原版主题 10 年前 2.85W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

Elessi - AJAX电商网站模板WordPress主题

Elessi - AJAX电商网站模板WordPress主题

原版主题 5 年前 4.19K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

Bronx - 时尚服饰购物商城网站WordPress主题

Bronx - 时尚服饰购物商城网站WordPress主题

原版主题, 汉化主题 8 年前 7.59K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

点击签到领取积分可下载全站资源！

今日签到

连续签到

Canice

15小时前

296
shboxy

19小时前

569
onlisai

1天前

95
S.

3天前

70
麦笛

3天前

665

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题

LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！