html的网格效果,jQuery和CSS3超酷3D网格布局文章墙特效

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

制作方法

HTML结构

该3D网格布局文章墙特效使用嵌套

的HTML结构。每一个element是一篇文章立方体，back是立方体的背面，文章的简介放置在这个面中。立方体的上右下左四个面使用空的

来制作，face是立方体的正面。content是文章的详细内容，即点击立方体后切换到全屏页面中显示的文字。

...

Article name武林秘籍

第一章 №1

...

+

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;

}

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倾斜的效果，以及点击某个网格后切换到相应的全屏界面的事件。具体代码请参考下载文件。