jqueryで片面のブックフリップアニメーションを片面に実装したい

Question

通常、ブックフリップアニメーションでは、ページはブックの中央から反転します。しかし、私たちはページがカバーページのように中央からではなく左からフリップする必要があるというクライアント要件を持っています。ページを変更するたびに、それは反転して左側に隠れます。満たしているライブラリをお勧めします。

私は参照のために1つのサンプルを与えました。

function clickFUnctionality() { 
 
    if (document.getElementById("page-flip").className == "active") { 
 
    document.getElementById("page-flip").classList.remove("active"); 
 

 
    } else { 
 
    document.getElementById("page-flip").className = "active"; 
 

 
    } 
 
}

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#all { 
 
    width: 680px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#page-flip { 
 
    position: absolute; 
 
    padding: 40px 40px 40px 0; 
 
    width: 300px; 
 
    height: 400px; 
 
    overflow: hidden; 
 
} 
 

 
#r1 { 
 
    position: absolute; 
 
    z-index: 2; 
 
    -webkit-transform-origin: 1315px 500px; 
 
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
} 
 

 
#p1 { 
 
    width: 1285px; 
 
    height: 1388px; 
 
    overflow: hidden; 
 
} 
 

 
#p1>div { 
 
    -webkit-transform-origin: 285px 0; 
 
    -webkit-transform: translate(1030px, 500px) rotate(32deg); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
    width: 285px; 
 
    height: 388px; 
 
    background-image: url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg); 
 
} 
 

 
#p1>div>div { 
 
    width: 10px; 
 
    height: 388px; 
 
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0))); 
 
} 
 

 
#p2>div { 
 
    width: 285px; 
 
    height: 388px; 
 
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5); 
 
    position: absolute; 
 
    z-index: 1; 
 
    background-image: url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg); 
 
} 
 

 
#r3 { 
 
    -webkit-transform-origin: 1315px 500px; 
 
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
#s3 { 
 
    -webkit-transform-origin: 70px 500px; 
 
    -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#page-flip.active #s3 { 
 
    -webkit-transform-origin: 325px 500px; 
 
    -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0); 
 
} 
 

 
#sp3 { 
 
    width: 25px; 
 
    height: 1000px; 
 
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0))); 
 
    -webkit-transition-property: width; 
 
    -webkit-transition-duration: 1s; 
 
    overflow: hidden; 
 
} 
 

 
#page-flip.active #sp3 { 
 
    width: 11px 
 
} 
 

 
.s { 
 
    width: 285px; 
 
    height: 388px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    z-index: 3; 
 
} 
 

 
#s2 { 
 
    -webkit-transform-origin: 45px 500px; 
 
    -webkit-transform: translate(240px, -500px) rotate(-32deg); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
    position: absolute; 
 
} 
 

 
#sp2 { 
 
    width: 15px; 
 
    height: 1000px; 
 
    background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0, 0, 0, 0))); 
 
    overflow: hidden; 
 
} 
 

 
#s4 { 
 
    opacity: 1; 
 
    -webkit-transition-duration: 0.5s; 
 
} 
 

 
#page-flip.active #s4 { 
 
    opacity: 0 
 
} 
 

 
#page-flip.active #s2 { 
 
    -webkit-transform-origin: 300px 500px; 
 
    -webkit-transform: translate(-15px, -500px) rotate(0deg); 
 
} 
 

 
#p3 { 
 
    width: 1285px; 
 
    height: 1388px; 
 
    overflow: hidden; 
 
} 
 

 
#p3>div { 
 
    -webkit-transform-origin: 0 0; 
 
    -webkit-transform: translate(1255px, 500px) rotate(-32deg); 
 
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin; 
 
    -webkit-transition-duration: 1s; 
 
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5); 
 
    width: 285px; 
 
    height: 388px; 
 
    background-image: url(http://cssdeck.com/uploads/media/items/6/6S8oF28.jpg); 
 
    overflow: hidden; 
 
} 
 

 
#p3>div>div { 
 
    width: 9px; 
 
    height: 500px; 
 
    float: right; 
 
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .20))); 
 
} 
 

 
#page-flip.active #r1 { 
 
    -webkit-transform-origin: 1570px 500px; 
 
    -webkit-transform: translate(-1285px, -500px) rotate(0deg); 
 
} 
 

 
#page-flip.active #p1>div { 
 
    -webkit-transform-origin: 285px 0; 
 
    -webkit-transform: translate(1285px, 500px) rotate(0deg); 
 
} 
 

 
#page-flip.active #r3 { 
 
    -webkit-transform-origin: 1570px 500px; 
 
    -webkit-transform: translate(-1285px, -500px) rotate(0deg); 
 
} 
 

 
#page-flip.active #p3>div { 
 
    -webkit-transform-origin: 0 0; 
 
    -webkit-transform: translate(1000px, 500px) rotate(0deg); 
 
} 
 

 
a { 
 
    display: block; 
 
    position: absolute; 
 
    margin: -20000px 0 0 0; 
 
    padding: 1px; 
 
    z-index: 3; 
 
    -webkit-transition-property: margin; 
 
    -webkit-transition-duration: 0.01s; 
 
} 
 

 
#coke { 
 
    width: 253px; 
 
    height: 158px; 
 
} 
 

 
a:hover { 
 
    padding: 0; 
 
    border: 1px dotted #92C7C1; 
 
} 
 

 
#page-flip.active #coke { 
 
    -webkit-transition-delay: .8s; 
 
    margin: 33px 0 0 14px; 
 
} 
 

 
#meninas { 
 
    width: 253px; 
 
    height: 167px; 
 
} 
 

 
#page-flip.active #meninas { 
 
    -webkit-transition-delay: .8s; 
 
    margin: 203px 0 0 14px; 
 
}

<div id="all"> 
 
    <div id="page-flip"> 
 
    <div id="r1"> 
 
     <div id="p1"> 
 
     <div> 
 
      <div></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div id="p2"> 
 
     <div></div> 
 
    </div> 
 
    <div id="r3"> 
 
     <div id="p3"> 
 
     <div> 
 
      <div></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="s"> 
 
     <div id="s3"> 
 
     <div id="sp3"></div> 
 
     </div> 
 
    </div> 
 
    <div class="s" id="s4"> 
 
     <div id="s2"> 
 
     <div id="sp2"></div> 
 
     </div> 
 
    </div> 
 
    <a id="coke" href="#" title="Pure CSS Coke Can"></a> 
 
    <a id="meninas" href="#" title="CSS 3D Meninas"></a> 
 
    </div> 
 
</div> 
 
text 
 
<button onclick="clickFUnctionality()">Change state</button>

Answer 1

私は、このプラグインが見つかりました：私はそれはあなたが探しているものに近いかもしれないと思うhttp://www.jquery.info/scripts/jFlip/demo.html

を。それが役に立てば幸い。

$("#g1").jFlip(300,300,{background:"green",cornersTop:true,scale:"fill"});

#g1 li img{ 
 
width:60px; 
 
}

<script src="http://www.jquery.info/scripts/jFlip/jquery-1.2.6.min.js"></script> 
 
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.4.js"></script> 
 
<ul id="g1"> 
 
    <li> 
 
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" /> 
 
    </li> 
 
    <li> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" /> 
 
    </li> 
 
    <li> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" /> 
 
    </li> 
 
    <li> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" /> 
 
    </li> 
 
</ul>