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

简要教程

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

使用方法

 HTML结构

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

   
   
  

    

      

        

          

            

              
Project 1
            
          
 
  
          

            
          
 
  
          Close
        
 
      
  
      

        

          

            

              
Project 2
            
          
 
  
          

            
          
 
  
          Close
        
 
      
  
      

        

          

            

              
Project 3
            
          
 
  
          

            
          
 
  
          Close
        
 
      
    
 
   
    

      
    
 
   
    

      
    
 
  

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属性用于存储当前可见的立方体的面。

麦艺画板(Max.art)

AI工业设计平台，专注于汽车设计，线稿、渲染、3D建模全流程覆盖

下载

立即学习“前端免费学习笔记（深入）”；

当用户旋转了某种项目类型时，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旋转项目展示模板的内容，更多相关内容请关注PHP中文网（www.php.cn）！