jQuery和CSS3超酷3D网格布局文章墙特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的jQuery和CSS3 3D网格布局文章墙特效。布局中所有的文章以网格形式排列，每个网格被制作为3D立方体。随着鼠标的移动，整个网格布局会在3D空间中倾斜。当鼠标放到一个网格上时，该网格中的文字会自动往上移动。点击某个网格，该网格会全屏展开显示出全部文字内容。

3D网格布局文章墙特效

制作方法

HTML结构

该3D网格布局文章墙特效使用嵌套<div>的HTML结构。每一个element是一篇文章立方体，back是立方体的背面，文章的简介放置在这个面中。立方体的上右下左四个面使用空的<div>来制作，face是立方体的正面。content是文章的详细内容，即点击立方体后切换到全屏页面中显示的文字。

<div class="scene">
  <div class="platform">
    <div class="element">
      <div class="back">
        <p class="hover-text">...</p>
      </div>
      <div class="side top"></div>
      <div class="side right"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="face">
        <p class="front-text">Article name</br>武林秘籍</p>
      </div>
      <div class="content">
        <h1 class="heading">第一章 №1</h1>
        <p class="content-text">... </p>
        <span class="close">+</span>
      </div>
    </div>
  </div>
</div>

CSS样式

在CSS代码中，.platform元素被添加了perspective属性，并设置了transform-style: preserve-3d;,用以制作3d空间，并使各个面具有立体感。同时，这里还使用了新的CSS3 will-change属性，关于这个属性可以参考CSS will-change属性介绍与注意事项。

.platform {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 5;
  width: 90%;
  height: 90%;
  padding: 5vh 4.5vw;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 2000;
          perspective: 2000;
}

关于立方体的制作可以参考CSS3 3D transforms系列教程-3D长方体。

JAVASCRIPT

在JS代码中，鼠标滑过某个网格时文字移动的效果是使用hoverEffect()函数来完成的。

function hoverEffect(px) {
    $('.element').each(function () {
        var $back = $(this).find('.back'), $text = $(this).find('.hover-text'), backH = $back.height(), textH = $text.height(), diff = 0, dur = 0, pxPerSecond = px || 100, that = this;
        $(this).unbind('mouseenter mouseleave');
        if (backH < textH) {
            diff = textH - backH + 50;
            dur = parseFloat(diff / pxPerSecond).toFixed(2);
            $text.css('transition', 'transform ' + dur + 's 0.5s linear');
            $(that).hover(function () {
                $text.css('transition', 'transform ' + dur + 's 0.5s linear');
                $text.css('transform', 'translateY(' + (0 - diff) + 'px)');
            }, function () {
                $text.css('transition', 'transform 0.5s 0.5s linear');
                $text.css('transform', 'translateY(0px)');
            });
        }
    });
};
hoverEffect();

js代码还用于鼠标移动时整个平台3D倾斜的效果，以及点击某个网格后切换到相应的全屏界面的事件。具体代码请参考下载文件。