jquery and CSS3 3D Rotating Project Presentation template

Brief tutorials

This is a very cool effect of jquery and CSS3 3D Rotating Project Presentation template. The template uses the CSS3 3D transform to create a rotation of the 3D cube, allowing the individual items to render a cube rotation effect when switching.

How to use

HTML structure

The

HTML structure consists of 2 parts: Nav.cd-3d-portfolio-navigation is the navigation of the project, and the Div.projects, which is used to wrap the individual items.

<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

To implement the 3D effect, a Portfolio3D object is created in the template and the bindEvents function is used to bind the event.

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

  });

}

The visibleFace property is used to store the faces of the currently visible 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('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      

//..    

}  

});    

//...

};

The above is the content of the jQuery and CSS3 3D rotation project display template.