Html CSS旋转-打开书本封面

我有一个元素，我试图像一本书的封面一样向外打开，但是我编写的代码使它向内打开

$（'.item'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
.item{
宽度：200px；
高度：400px；
保证金：0自动；
边界半径：0%；
位置：相对位置；
游标：默认值；
}
.信息包装{
宽度：100%；
身高：100%；
边界半径：0%；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
-ms透视图：800px；
透视图：800px；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
顶部：20px；
左：20px；
背景#f9f9f9；
}
.info{
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：0%；
-webkit转换来源：0%50%；
-moz变换原点：0%50%；
-o-变换原点：0%50%；
-ms变换原点：0%50%；
变换原点：0%50%；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
z指数：999999；
}
.info>div{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：0%；
背景位置：中心；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
}
.info.info返回{
-webkit变换：旋转3D（0,1,0,180度）；
-莫兹变换：旋转3d（0,1,0,180度）；
-o变换：旋转3d（0,1,0,180度）；
-ms变换：旋转3D（0,1,0,180度）；
变换：旋转3d（0,1,0,180度）；
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#103b72+013539F+50*/
背景#103b72；
/*旧浏览器*/
背景：-moz线性梯度（左，#103b72 0%，3539F50%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左，#103b72 0%，3539F50%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，103b72 0%，13539f 50%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#103b72'，endColorstr='#13539f'，GradientType=1）；
/*IE6-9*/
}
.info h3{
颜色：#fff；
文本转换：大写；
字母间距：2px；
字体大小：14px；
利润率：0.15px；
填充：40px0；
高度：90px；
字体系列：“开放式Sans”、Arial、Sans serif；
文本阴影：0 1px#fff，0 1px 2px rgba（0,0,0,0.3）；
}
.信息包装{
背景：#125daa；
}
.item.open.info{
-webkit变换：旋转3D（0,1,0,150度）；
-莫兹变换：旋转3d（0,1,0,150度）；
-o变换：旋转3d（0,1,0,150度）；
-ms变换：旋转3D（0,1,0,150度）；
变换：旋转3d（0,1,0,150度）；
}

考试题目
点击打开
您需要使其以另一种方式旋转，并将
旋转3d（0,1,0,150度）
替换为
旋转3d（0,1,0，-150度）
上的
.item.open.info
：


$（'.item'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
.item{
宽度：200px；
高度：400px；
保证金：0自动；
边界半径：0%；
位置：相对位置；
游标：默认值；
}
.信息包装{
宽度：100%；
身高：100%；
边界半径：0%；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
-ms透视图：800px；
透视图：800px；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
顶部：20px；
左：20px；
背景#f9f9f9；
}
.info{
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：0%；
-webkit转换来源：0%50%；
-moz变换原点：0%50%；
-o-变换原点：0%50%；
-ms变换原点：0%50%；
变换原点：0%50%；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-ms转换：所有0.4s易进易出；
过渡：所有0.4缓进缓出；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
z指数：999999；
}
.info>div{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：0%；
背景位置：中心；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
}
.info.info返回{
-webkit变换：旋转3D（0,1,0,180度）；
-莫兹变换：旋转3d（0,1,0,180度）；
-o变换：旋转3d（0,1,0,180度）；
-ms变换：旋转3D（0,1,0,180度）；
变换：旋转3d（0,1,0,180度）；
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#103b72+013539F+50*/
背景#103b72；
/*旧浏览器*/
背景：-moz线性梯度（左，#103b72 0%，3539F50%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左，#103b72 0%，3539F50%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，103b72 0%，13539f 50%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#103b72'，endColorstr='#13539f'，GradientType=1）；
/*IE6-9*/
}
.info