Javascript 想要在jquery中只实现单面书本翻转动画吗

通常，在书本翻转动画中，页面是从书本中心翻转的。但我们有一个客户要求，页面应该从左侧翻转，而不是像封面那样从中间翻转。每次我们更改页面时，它都会翻转并隐藏到左侧。请推荐任何满足您需求的图书馆

我给了一个样品作为参考

功能点击功能（）{
if（document.getElementById（“页面翻转”）.className==“活动”）{
document.getElementById（“页面翻转”）.classList.remove（“活动”）；
}否则{
document.getElementById（“页面翻转”）.className=“活动”；
}
}

正文{
填充：0；
保证金：0；
}
#全部{
宽度：680px；
左边距：自动；
右边距：自动；
}
#翻页{
位置：绝对位置；
填充：40px 40px 40px 0；
宽度：300px；
高度：400px；
溢出：隐藏；
}
#r1{
位置：绝对位置；
z指数：2；
-webkit转换原点：1315px 500px；
-webkit变换：平移（-1030px，-500px）旋转（-32度）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
}
#p1{
宽度：1285px；
高度：1388px；
溢出：隐藏；
}
#p1>div{
-webkit转换原点：285px 0；
-webkit变换：平移（1030px，500px）旋转（32度）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
宽度：285px；
高度：388px；
背景图片：url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}
#p1>div>div{
宽度：10px；
高度：388px；
背景：-webkit渐变（线性，左上，右上，从（rgba（0,0,0,25））到（rgba（0,0,0,0）））；
}
#p2>div{
宽度：285px；
高度：388px；
-webkit盒阴影：0 11px rgba（0,0,0,5）；
位置：绝对位置；
z指数：1；
背景图片：url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}
#r3{
-webkit转换原点：1315px 500px；
-webkit变换：平移（-1030px，-500px）旋转（-32度）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
位置：绝对位置；
z指数：2；
}
#s3{
-webkit转换源：70px 500px；
-webkit变换：平移（215px，-500px）旋转（-32度）平移（40px，0）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
位置：绝对位置；
z指数：1；
}
#page-flip.active#s3{
-webkit转换原点：325px 500px；
-webkit变换：平移（-40px，-500px）旋转（0deg）平移（40px，0）；
}
#sp3{
宽度：25px；
高度：1000px；
背景：-webkit渐变（线性，左上，右上，从（rgba（0,0,0,25））到（rgba（0,0,0,0）））；
-webkit转换属性：宽度；
-webkit转换持续时间：1s；
溢出：隐藏；
}
#page-flip.active#sp3{
宽度：11px
}
s{
宽度：285px；
高度：388px；
位置：绝对位置；
溢出：隐藏；
z指数：3；
}
#s2{
-webkit转换源：45px 500px；
-webkit变换：平移（240px，-500px）旋转（-32度）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
位置：绝对位置；
}
#sp2{
宽度：15px；
高度：1000px；
背景：-webkit渐变（线性，右上，左上，从（rgba（0,0,0,18））到（rgba（0,0,0,0）））；
溢出：隐藏；
}
#s4{
不透明度：1；
-webkit转换持续时间：0.5s；
}
#page-flip.active#s4{
不透明度：0
}
#page-flip.active#s2{
-webkit转换源：300px 500px；
-webkit变换：平移（-15px，-500px）旋转（0度）；
}
#p3{
宽度：1285px；
高度：1388px；
溢出：隐藏；
}
#p3>div{
-webkit转换原点：0；
-webkit变换：平移（1255px，500px）旋转（-32度）；
-webkit转换属性：-webkit转换，-webkit转换原点；
-webkit转换持续时间：1s；
-webkit盒阴影：0 11px rgba（0,0,0,5）；
宽度：285px；
高度：388px；
背景图片：url(http://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
溢出：隐藏；
}
#p3>div>div{
宽度：9px；
高度：500px；
浮动：对；
背景：-webkit渐变（线性，左上，右上，从（rgba（0,0,0,0）），到（rgba（0,0,0,20））；
}
#page-flip.active#r1{
-webkit转换源：1570px 500px；
-webkit变换：平移（-1285px，-500px）旋转（0度）；
}
#page-flip.active#p1>div{
-webkit转换原点：285px 0；
-webkit变换：平移（1285px，500px）旋转（0度）；
}
#page-flip.active#r3{
-webkit转换源：1570px 500px；
-webkit变换：平移（-1285px，-500px）旋转（0度）；
}
#page-flip.active#p3>div{
-webkit转换原点：0；
-webkit变换：平移（1000px，500px）旋转（0deg）；
}
a{
显示：块；
位置：绝对位置；
利润率：-20000px；
填充：1px；
z指数：3；
-webkit转换属性：边距；
-webkit转换持续时间：0.01s；
}
#可乐{
宽度：253px；
高度：158px；
}
a:悬停{
填充：0；
边框：1px点#92C7C1；
}
#page-flip.active#coke{
-webkit转换延迟：.8s；
利润率：33像素0.14像素；
}
#梅尼纳斯{
宽度：253px；
高度：167px；
}
#page-flip.active#meninas{
-webkit转换延迟：.8s；
利润率：203px 0 14px；
}

文本
更改状态

我找到了这个插件：

我想它可能和你要找的很接近。希望能有帮助

jFlip（300300，{background:“green”，cornersTop:true，scale:“fill”}）

#g1 li img{
宽度：60px；
}

谢谢。非常接近要求。