CSS3D照片墙 图片库特效

演示  website 下载

介绍

纯css3D照片墙特效，当鼠标悬停在图片上时，有一个3D翻转的特效，非常炫酷。

使用方法

3D照片墙css样式代码

* {
    margin:0; padding:0;
    box-sizing:border-box;
}
html, body {
    background:#E2E2E2;
    overflow:hidden;
    height:100%;
}

#main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#list {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 740px;
    flex-wrap: wrap;
    transform:rotateX(54deg) rotateY(0deg) rotateZ(-37deg);
    transform-style: preserve-3d;
}
.photo {
    width: 300px;
    position: relative;
    margin: 2em;
}
.photo div {
    transform-style: preserve-3d;
    transition:all .6s linear;
}
.photo:hover div{
    transform: translateZ(2em) rotateX(170deg);
    transform-origin: center center;
    z-index: 1;
}
.photo img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
}
.photo .card {
    position: absolute;
    top: 0;
    background: #1C0F13;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 1.4em 2em;
    color: #FFF;
    justify-content: flex-end;
    font-size: 14px;
    transform: rotateX(180deg);
    flex-direction: column;
    font-family:"Open Sans", Roboto, sans-serif;
}
.author {
    font-size: 19px;
    font-weight: 800;
    text-transform: uppercase;
}