jQuery和CSS3 3D旋轉項目展示模板-css教學-PHP中文網

jQuery和CSS3 3D旋轉項目展示模板

黄舟

發布： 2017-01-18 13:30:49

原創

1428 人瀏覽過

簡要教學

這是一款效果非常酷炫的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(&#39;.cd-3d-portfolio-navigation&#39;);
  this.rowsWrapper = this.element.children(&#39;.projects&#39;);
  this.rows = this.rowsWrapper.children(&#39;.row&#39;);
  this.visibleFace = &#39;front&#39;;
  this.visibleRowIndex = 0;
  this.rotationValue = 0;
  //animating variables
  this.animating = false;
  this.scrolling = false;
  // bind portfolio events
  this.bindEvents();
}
  
if( $(&#39;.cd-3d-portfolio&#39;).length > 0 ) {
  var portfolios3D = [];
  $(&#39;.cd-3d-portfolio&#39;).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(&#39;click&#39;, &#39;a:not(.selected)&#39;, function(event){    
//update visible projects when clicking on the filter    
event.preventDefault();    
if( !self.animating ) {      
self.animating = true;      
var index = $(this).parent(&#39;li&#39;).index();             
//show new projects      
self.showNewContent(index);        
//update filter selected element      
//..    
}  
});    
//...
};

登入後複製

以上就是jQuery和CSS3 3D旋轉項目展示模板的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！