jQuery和CSS3 3D旋转项目展示模板

PetitQ 图片/图形, 布局框架 2019-3-21 2.09K 0 0

这是一款效果非常炫酷的 jQuery 和 CSS3 3D 旋转项目展示模板。该模板通过 CSS3 3D transform 来制作 3D 立方体的旋转效果，使各个项目在切换时呈现立方体旋转效果。

HTML 结构

HTML 结构包括 2 个部分：nav.cd-3d-portfolio-navigation 是项目的导航，以及 div.projects，它用于包裹各个项目。

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

```
<div class="cd-3d-portfolio">
```

  <nav class="cd-3d-portfolio-navigation">

```
    <div class="cd-wrapper">
```
```
      <h1>3D Portfolio Template</h1>
```
```
 
```
```
      <ul>
```

        <li><a href="#0" class="selected">Filter 1</a></li>

        <li><a href="#0">Filter 2</a></li>

        <li><a href="#0">Filter 3</a></li>

```
      </ul>
```
```
    </div>
```

  </nav> <!-- .cd-3d-portfolio-navigation -->

```
 
```
```
  <div class="projects">
```
```
    <ul class="row">
```

      <li class="front-face selected project-1">

```
        <div class="project-wrapper">
```
```
          <div class="project-image">
```
```
            <div class="project-title">
```
```
              <h2>Project 1</h2>
```
```
            </div>
```

          </div> <!-- .project-image -->

```
 
```
```
          <div class="project-content">
```

            <!-- project content here -->

          </div> <!-- .project-content -->

```
 
```

          <a href="#0" class="close-project">Close</a>

        </div> <!-- .project-wrapper -->

```
      </li>
```
```
 
```
```
      <li class="right-face project-2">
```
```
        <div class="project-wrapper">
```
```
          <div class="project-image">
```
```
            <div class="project-title">
```
```
              <h2>Project 2</h2>
```
```
            </div>
```

          </div> <!-- .project-image -->

```
 
```
```
          <div class="project-content">
```

            <!-- project content here -->

          </div> <!-- .project-content -->

```
 
```

          <a href="#0" class="close-project">Close</a>

        </div> <!-- .project-wrapper -->

```
      </li>
```
```
 
```
```
      <li class="right-face project-3">
```
```
        <div class="project-wrapper">
```
```
          <div class="project-image">
```
```
            <div class="project-title">
```
```
              <h2>Project 3</h2>
```
```
            </div>
```

          </div> <!-- .project-image -->

```
 
```
```
          <div class="project-content">
```

            <!-- project content here -->

          </div> <!-- .project-content -->

```
 
```

          <a href="#0" class="close-project">Close</a>

        </div> <!-- .project-wrapper -->

```
      </li>
```
```
    </ul> 
```
```
 
```
```
    <ul class="row">
```
```
      
```
```
    </ul> 
```
```
 
```
```
    <ul class="row">
```
```
      
```
```
    </ul> 
```
```
  </div>
```
```
</div>
```

JavaScript

为了实现 3D 效果，模板中创建了一个 Portfolio3D 对象，并使用 bindEvents 函数来绑定事件。

```
function Portfolio3D( element ) {
```
```
  //define a Portfolio3D object
```
```
  this.element = element;
```

  this.navigation = this.element.children('.cd-3d-portfolio-navigation');

  this.rowsWrapper = this.element.children('.projects');

  this.rows = this.rowsWrapper.children('.row');

```
  this.visibleFace = 'front';
```
```
  this.visibleRowIndex = 0;
```
```
  this.rotationValue = 0;
```
```
  //animating variables
```
```
  this.animating = false;
```
```
  this.scrolling = false;
```
```
  // bind portfolio events
```
```
  this.bindEvents();
```
```
}
```
```
 
```

if( $('.cd-3d-portfolio').length > 0 ) {

```
  var portfolios3D = [];
```

  $('.cd-3d-portfolio').each(function(){

    //create a Portfolio3D object for each .cd-3d-portfolio

    portfolios3D.push(new Portfolio3D($(this)));

```
  });
```
```
}
```

visibleFace 属性用于存储当前可见的立方体的面。当用户旋转了某种项目类型时，showNewContent()方法用于显示正确的立方体面，并旋转 ul.row 中的元素。

Portfolio3D.prototype.bindEvents = function() {

```
  var self = this;
```
```
 
```

  this.navigation.on('click', 'a:not(.selected)', function(event){

    //update visible projects when clicking on the filter

```
    event.preventDefault();
```
```
    if( !self.animating ) {
```
```
      self.animating = true;
```

      var index = $(this).parent('li').index();

```
 
```
```
      //show new projects
```
```
      self.showNewContent(index);
```
```
 
```
```
      //update filter selected element
```
```
      //..
```
```
    }
```
```
  });
```
```
 
```
```
  //...
```
```
};
```

jQuery 和 CSS3 3D 旋转项目展示模板

已有 522 人购买

永久更新：
演示数据：
提取码：npdq

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

图片/图形

jQuery和CSS3 3D旋转项目展示模板

HTML 结构

JavaScript

jQuery 和 CSS3 3D 旋转项目展示模板

相关文章

炫酷CSS3鼠标跟随图片序列动画特效

全屏产品广告图片拖拽预览UI布局特效

文章页面网格布局页面UI设计

发表回复取消回复

热销模板

图片/图形

HTML 结构

JavaScript

jQuery 和 CSS3 3D 旋转项目展示模板

相关文章

发表回复 取消回复

热销模板

发表回复取消回复