css3动态画廊,JS+CSS3实现超炫的散列画廊特效

这篇文章主要为大家详细介绍了JS+CSS3实现超炫的散列画廊特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

下面来介绍下我按照网上的视频讲解实现的照片墙效果图。

最终实现的效果包括如下：

•当点击某张图片时，该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。

•某张图片被点击时，所有的图片的位置被随机重排

•某个控制按钮被点击时，对应的图片显示到正中间，控制按钮进行相应的样式切换。当连续点击某个控制按钮时，图片伴随着按钮的点击进行正反面切换

对整个效果进行VCD分解，如下图：

按照计算机能理解的方式来分解案例。

•View视觉 ： HTML + css 基本界面模板

•Controller : Javascript 内容处理、事件处理

•Data数据 ：data.js  非必须，助于理解

Data数据是很常用的，如果将内容写死到View即HTML中，当要去改变内容的时候就得修改HTML,但是使用VCD的话就只需要修改数据部分就可以了。同时，一般数据部分是由后台生成的，这样的替换就更为方便。这个案例中的海报都是由模板加上数据生成的。

View 部分对效果区域进行模块分解，分解为如下三个部分：

•当前展现的海报区

水平垂直居中

允许被控制展现&翻转

•左右存放区域

以切分为左右区域

作用是存放其它的海报

每个海报位置随机，角度随机

•控制条区

控制&展现对应的海报

翻面切换正反面

实现的html代码如下：

{{caption}}

{{desc}}

这里的{{img}}、{{caption}}、{{desc}}就是模板字符串，后面会数据部分进行相应但是替换。

view部分的样式如下：

*{

padding:0;

margin:0;

}

body{

background-color:#fff;

color:#555;

font-family:'Avenir Next','Lantinghei SC';

font-size:14px;

-moz-font-smoothing:antialiased;

-webkit-font-smoothing:antialiased;/*字体平滑*/

}

.wrap{ //图片区域在body中垂直居中

width:100%;

height:900px;

position:absolute;

/*-------------------下面两行实现了垂直居中-------------

top:50%;

margin-top:-300px;

/*----------下面这四行也是实现垂直居中的一种方式-----------------*/

top:0;

bottom:0;

margin-top:auto;

margin-bottom:auto;

/*------------------------------------------------------------*/

background-color:#333;

overflow:hidden;

-moz-perspective:800px;

-webkit-perspective:800px;//让子元素获得3D元素支持，这里是设置子元素距离视图的位置

}

/*海报样式*/

.photo{

width:260px;

height:320px;

/*因为每个海报都是利用top和left随机定位的，所以将position设置为absolute*/

position:absolute;

z-index:1;

box-shadow:0 0 1px rgba(0,0,0,.01);

/*transform:rotateY(30deg);*/

-moz-transition:all .6s; /*让海报移动产生动画效果*/

-webkit-transition:all .6s;

}

.photo .side{

width:100%;

height:100%;

background-color:#eee;

position:absolute;

top:0;

right:0;

padding:20px;

box-sizing:border-box;

}

.photo .side-front .image{

width:100%;

height:250px;

line-height:250px;

overflow:hidden;

}

.photo .side-front .image img{

width:100%;

}

.photo .side-front .caption{

text-align:center;

font-size:16px;

line-height:50px;

}

.photo .side-back .desc{

color:#666;

font-size:14px;

line-height:1.5em;

}

/*当前选中的海报样式*/

.photo_center{

/*---实现垂直居中的方式一

left:50%;

top:50%;

margin-left:-130px;

margin-top:-160px;

*/

/*实现垂直居中的方式二*/

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

z-index:999;//让当前选中的海报不被其他的海报覆盖

}

/*负责翻转*/

.photo-wrap{

position:absolute;

width:100%;

height:100%;

-moz-transform-style:perserve-3d;

-webkit-transform-style:preserve-3d;/*让里面的元素支持3d的效果*/

transform-style:preserve-3d;/*因为掉了这一句，firefox中的背面一直显示不出来*/

-webkit-transition:all 1s;

-moz-transition:all 1s;

transition:all 1s;

}

.photo-wrap .side{

-moz-backface-visibility:hidden;//当屏幕不面向屏幕时被隐藏

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

}

.photo-wrap .side-front{

-moz-transform:rotateY(0deg);

-webkit-transform:rotateY(0deg);

transform:rotateY(0deg);

}

.photo-wrap .side-back{

-moz-transform:rotateY(180deg);

-webkit-transform:rotateY(180deg);

transform:rotateY(180deg);

}

.photo-front .photo-wrap{

-moz-transform:rotateY(0deg);

-webkit-transform:rotateY(0deg);

transform:rotateY(0deg);

}

.photo-back .photo-wrap{

-moz-transform:rotateY(180deg);

-webkit-transform:rotateY(180deg);

transform:rotateY(180deg);

}

/*控制按钮的样式*/

.nav{

width:40%;

height:30px;

line-height:30px;

position:absolute;

left:30%;

bottom:20px;

z-index:999;

/*background-color:#fff;*/

text-align:center;

}

/*普通样式*/

.nav .i{

width:30px;

height:30px;

display:inline-block;

cursor:pointer;

background-color:#aaa;

text-align:center;

border-radius:50%;

-moz-transform:scale(.48);

-webkit-transform:scale(.48);

transform:scale(.48);

-webkit-transition:all 1s;

-moz-transition:all 1s;

}

.nav .i:after{

}

/*当前选中样式*/

.nav .i_current{

-moz-transform:scale(1);

-webkit-transform:scale(1);

}

.nav .i_current:after{

opacity:1;

}

/*背面样式*/

.nav .i_back{

-moz-transform:rotateY(-180deg);

-webkit-transform:rotateY(-180deg);

background-color:#555;

}

/*样式优化，*/

.photo{/*定义下面的是为了消除图片突然的闪动*/

left:50%;

top:50%;

margin:-160px 0 0 -130px;

}

.photo-wrap{

-moz-transform-origin:0% 50%;

-webkit-transform-origin:0% 50%;

}

.photo-front .photo-wrap{

-moz-transform:translate(0px,0px) rotateY(0deg);

-webkit-transform:translate(0px,0px) rotateY(0deg);

}

.photo-back .photo-wrap{

-moz-transform:translate(260px,0px) rotateY(180deg);

-webkit-transform:translate(260px,0px) rotateY(180deg);

}

下面来解释下样式中的一些重要部分。

案例中的设置:-webkit-perspective:800px;

可以看到设置这个后再设置rotateY(45deg)的效果，如果不设置-webkit-transform，那么旋转的效果便显示不出来，图片的旋转只不过是在平面上进行旋转。如果将它的值设置的太小，效果便会如下：

div.photo负责图片的平移和旋转，而div.photo-wrap负责3D翻转(正反面切换)。为了让里面的元素支持3D效果给div.photo-wrap设置 -webkit-transform-style:preserve-3d。

.photo-wrap .side样式中  -webkit-backface-visibility：hidden;这一句的作用是当元素不面向屏幕时进行隐藏。

为了使图片的移动和翻转具有动画效果，给.photo-wrap设置-webkit-transition:下面来看下transition的解释说明：

导航条的样式