图片/图形

jQuery和CSS3 3D旋转项目展示模板

阿里云


这是一款效果非常炫酷的 jQuery 和 CSS3 3D 旋转项目展示模板。该模板通过 CSS3 3D transform 来制作 3D 立方体的旋转效果,使各个项目在切换时呈现立方体旋转效果。

HTML 结构

HTML 结构包括 2 个部分:nav.cd-3d-portfolio-navigation 是项目的导航,以及 div.projects,它用于包裹各个项目。

也想出现在这里?联系我们
创客主机
  1. <div class="cd-3d-portfolio">
  2.   <nav class="cd-3d-portfolio-navigation">
  3.     <div class="cd-wrapper">
  4.       <h1>3D Portfolio Template</h1>
  5.  
  6.       <ul>
  7.         <li><a href="#0" class="selected">Filter 1</a></li>
  8.         <li><a href="#0">Filter 2</a></li>
  9.         <li><a href="#0">Filter 3</a></li>
  10.       </ul>
  11.     </div>
  12.   </nav> <!-- .cd-3d-portfolio-navigation -->
  13.  
  14.   <div class="projects">
  15.     <ul class="row">
  16.       <li class="front-face selected project-1">
  17.         <div class="project-wrapper">
  18.           <div class="project-image">
  19.             <div class="project-title">
  20.               <h2>Project 1</h2>
  21.             </div>
  22.           </div> <!-- .project-image -->
  23.  
  24.           <div class="project-content">
  25.             <!-- project content here -->
  26.           </div> <!-- .project-content -->
  27.  
  28.           <a href="#0" class="close-project">Close</a>
  29.         </div> <!-- .project-wrapper -->
  30.       </li>
  31.  
  32.       <li class="right-face project-2">
  33.         <div class="project-wrapper">
  34.           <div class="project-image">
  35.             <div class="project-title">
  36.               <h2>Project 2</h2>
  37.             </div>
  38.           </div> <!-- .project-image -->
  39.  
  40.           <div class="project-content">
  41.             <!-- project content here -->
  42.           </div> <!-- .project-content -->
  43.  
  44.           <a href="#0" class="close-project">Close</a>
  45.         </div> <!-- .project-wrapper -->
  46.       </li>
  47.  
  48.       <li class="right-face project-3">
  49.         <div class="project-wrapper">
  50.           <div class="project-image">
  51.             <div class="project-title">
  52.               <h2>Project 3</h2>
  53.             </div>
  54.           </div> <!-- .project-image -->
  55.  
  56.           <div class="project-content">
  57.             <!-- project content here -->
  58.           </div> <!-- .project-content -->
  59.  
  60.           <a href="#0" class="close-project">Close</a>
  61.         </div> <!-- .project-wrapper -->
  62.       </li>
  63.     </ul> <!-- .row -->
  64.  
  65.     <ul class="row">
  66.       <!-- projects here -->
  67.     </ul> <!-- .row -->
  68.  
  69.     <ul class="row">
  70.       <!-- projects here -->
  71.     </ul> <!-- .row -->
  72.   </div><!-- .projects -->
  73. </div>

JavaScript

为了实现 3D 效果,模板中创建了一个 Portfolio3D 对象,并使用 bindEvents 函数来绑定事件。

  1. function Portfolio3D( element ) {
  2.   //define a Portfolio3D object
  3.   this.element = element;
  4.   this.navigation = this.element.children('.cd-3d-portfolio-navigation');
  5.   this.rowsWrapper = this.element.children('.projects');
  6.   this.rows = this.rowsWrapper.children('.row');
  7.   this.visibleFace = 'front';
  8.   this.visibleRowIndex = 0;
  9.   this.rotationValue = 0;
  10.   //animating variables
  11.   this.animating = false;
  12.   this.scrolling = false;
  13.   // bind portfolio events
  14.   this.bindEvents();
  15. }
  16.  
  17. if( $('.cd-3d-portfolio').length > 0 ) {
  18.   var portfolios3D = [];
  19.   $('.cd-3d-portfolio').each(function(){
  20.     //create a Portfolio3D object for each .cd-3d-portfolio
  21.     portfolios3D.push(new Portfolio3D($(this)));
  22.   });
  23. }

visibleFace 属性用于存储当前可见的立方体的面。当用户旋转了某种项目类型时,showNewContent()方法用于显示正确的立方体面,并旋转 ul.row 中的元素。

  1. Portfolio3D.prototype.bindEvents = function() {
  2.   var self = this;
  3.  
  4.   this.navigation.on('click', 'a:not(.selected)', function(event){
  5.     //update visible projects when clicking on the filter
  6.     event.preventDefault();
  7.     if( !self.animating ) {
  8.       self.animating = true;
  9.       var index = $(this).parent('li').index();
  10.  
  11.       //show new projects
  12.       self.showNewContent(index);
  13.  
  14.       //update filter selected element
  15.       //..
  16.     }
  17.   });
  18.  
  19.   //...
  20. };

jQuery 和 CSS3 3D 旋转项目展示模板

已有 515 人购买
  • npdq
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!