Home > Article > Web Front-end > jQuery and CSS3 3D rotation project display template
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('.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 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('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 jQuery and CSS3 3D rotation project display template. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!