PROMULGATOR

    幽然~~窳纛?

    福建省福州市仓山区
    Html
    Css
    Js
1
2
3
4
5
6
7
<div id="box">
    <div class="page">
        <span class="front"></span>
        <span class="back"></span>
    </div>
    <div class="page2"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
* {
    margin:0;
    padding:0;
    list-style:none;
}
#box {
    width:700px;
    height:400px;
    margin:100px auto;
    background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat;
    position:relative;
    perspective:1200px;
}
#box .page {
    position:absolute;
    width:50%;
    height:100%;
    right:0;
    top:0;
    transform-style:preserve-3d;
    z-index:2;
    transform-origin:left center;
    transition:1s all ease;
}
#box .page span {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}
#box .page span.front {
    background:url("http://www.jq22.com/img/cs/500x300-1.png") no-repeat right top;
    transform:translateZ(0.1px);
}
#box .page span.back {
    background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat left top;
    transform:translateZ(-0.1px) scale(-1,1);
}
#box .page2 {
    position:absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
window.onload = function() {
    var oBox = document.getElementById('box');
    var oPage = document.querySelector('.page');
    var oPage2 = document.querySelector('.page2');
    var oFront = document.querySelector('.front');
    var oBack = document.querySelector('.back');
    var iNow = 1;
    var bReady = true;
    oBox.onclick = function() {
        if (bReady == false) return;
        bReady = false;
        iNow++;
        oPage.style.transition = '1s all ease';
        oPage.style.transform = 'rotateY(-180deg)';
        oPage.addEventListener('transitionend', function() {
            oPage.style.transition = 'none';
            oPage.style.transform = 'rotateY(0deg)';
            oFront.style.backgroundImage = oBox.style.backgroundImage = 'url(http://www.jq22.com/img/cs/500x300-' + (iNow % 3) + '.png)';
            oBack.style.backgroundImage = oPage2.style.backgroundImage = 'url(http://www.jq22.com/img/cs/500x300-' + (iNow + 1) % 3 + '.png)';
            bReady = true;
        }, false);
    };
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

3D翻页效果（无折痕）

图片翻页效果，使用与相册制作

0