Home  >  Article  >  Web Front-end  >  jQuery and CSS3 3D rotation project display template

jQuery and CSS3 3D rotation project display template

黄舟
黄舟Original
2017-01-18 13:30:491403browse

Brief Tutorial

This is a very cool jQuery and CSS3 3D rotation project display template. This template uses CSS3 3D transform to create a 3D cube rotation effect, so that each item will show a cube rotation effect when switching.

How to use

HTML structure

The HTML structure includes 2 parts: nav.cd-3d-portfolio-navigation is the navigation of the project, and div.projects, which uses for each package item.

<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

In order to achieve the 3D effect, a Portfolio3D object is created in the template and the bindEvents function is used to bind events.

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)));
  });
}

The visibleFace property is used to store the currently visible face of the cube.

When the user rotates a certain item type, the showNewContent() method is used to display the correct cube face and rotate the elements in 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      
//..    
}  
});    
//...
};

The above is the content of jQuery and CSS3 3D rotation project display template. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn