jQuery和CSS33D旋转项目展示模板

这是一款效果非常炫酷的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> <!-- .row -->
 
 <ul class="row">
 <!-- projects here -->
 </ul> <!-- .row -->
 
 <ul class="row">
 <!-- projects here -->
 </ul> <!-- .row -->
 </div><!-- .projects -->
</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 
//.. 
} 
}); 
//...
};