PROMULGATOR

    恬恬~

    山西省
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 .flip {
    transform:translate3d(0,0,0);
    margin:40px;
}
.flip-box {
    position:relative;
    width:110px;
    height:140px;
    overflow:hidden;
}
.flip-item {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    transition:all .5s ease-in-out;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    /*border:1px solid #ddd;
    */
    box-sizing:border-box;
}
.flip-item img {
    width:70px;
    height:70px;
    border-radius:100%;
    margin:32px auto;
    display:block;
}
.flip-item-text {
    position:absolute;
    bottom:8px;
    left:0;
    width:100%;
    text-align:center;
    color:#fff;
}
.flip-item-front {
    transform:rotateY(0deg);
    z-index:2;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

css3图片3D翻转

0