Rumah > hujung hadapan web > tutorial css > jQuery和CSS3 3D旋转项目展示模板

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

黄舟
Lepaskan: 2017-01-18 13:30:49
asal
1485 orang telah melayarinya

简要教程

这是一款效果非常炫酷的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>
Salin selepas log masuk

JavaScript

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

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)));
  });
}
Salin selepas log masuk

visibleFace属性用于存储当前可见的立方体的面。

当用户旋转了某种项目类型时,showNewContent()方法用于显示正确的立方体面,并旋转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      
//..    
}  
});    
//...
};
Salin selepas log masuk

以上就是jQuery和CSS3 3D旋转项目展示模板的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan