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

簡要教程

這是一款效果非常炫酷的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      //..    }  });    //...};

以上就是jQuery和CSS3 3D旋轉項目展示模板的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

