Javascript jquery将卡片翻转为onClick而不是css hover rotate

我是JS和jquery新手，所以请对我放松！哈哈……我正在用引导程序用卡片做布局。到目前为止，我有一个悬停翻转的卡，这是很好的工作，但我想我宁愿卡翻转来回点击。我尝试过给这些卡片上一个翻转类和使用toggleclass，但没有任何运气。任何建议都将不胜感激！谢谢

。图书卡{
位置：相对位置；
盒影：5px15px 50px#aaa；
最大宽度：420px；
溢出：隐藏；
过渡期：全部8秒；
}
.轮换{
透视图：100雷姆；
}
.回来{
位置：绝对位置；
前-100%；
背景：#fefefe；
身高：100%；
宽度：100%；
不透明度：0；
用户选择：无；
指针事件：无；
变换：旋转（180度）；
过渡：顶部.8s，不透明度.4s；
}
.背景内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.背景内容p{
颜色：#111517；
}
.背景内容h1{
字体大小：30px！重要；
}
.背景内容h3{
字体大小：25px！重要；
}
.背景内容a{
字体大小：30px；
左：3倍；
}
.旋转：悬停.预订卡{
变换：旋转（180度）；
}
.旋转：悬停。返回{
不透明度：1；
排名：0；
用户选择：自动；
指针事件：自动；
}

待定-HRG
波特兰，我
波特兰，我
下午4:45
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。威尼斯贵宾酒店

你可以做这样的事情

 `.flip .card .back {
    padding-top: 10%;
   -webkit-transform: rotatey(-180deg);
      transform: rotatey(-180deg);
    position: absolute;
 }`

$（'.flip'）。单击（函数（）{//hover可以使用
$（this.find（'.card'）.toggleClass（'flipped'）；
});
正文{
填充顶部：50px；
背景:#555；
}
.翻转{
-webkit透视图：800；
前景：800；
位置：相对位置；
文本对齐：居中；
}
.翻转.卡片.翻转{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
}
.翻转.卡片{
宽度：270px；
高度：178px；
-webkit变换样式：保留-3d；
-webkit转换：0.5s；
变换样式：保留-3d；
过渡：0.5s；
背景色：#fff；
}
.翻转.卡片.脸{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
z指数：2；
}
.翻转.卡片.正面{
位置：绝对位置；
宽度：270px；
z指数：1；
}
.翻页.卡片.正面图像{
宽度：270px；
身高：100%；
}
.flip.card.img{
位置：Relative；
宽度：270px；
高度：178px；
z指数：1；
边框：2倍实心#000；
}
.翻转.卡片.背面{
垫面：10%；
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
位置：绝对位置；
}
.内部{
保证金：0px！重要；
宽度：270px；
}

通过自动化提高效率
了解更多
通过自动化提高效率
了解更多
通过自动化提高效率
了解更多
通过自动化提高效率
了解更多
完美，只需稍作改动即可。使用.click事件而不是jquery事件中的.hover。因此，旋转将在单击时进行。干得好！但他需要的是悬停，这是他的要求。“……到目前为止，我的卡片在悬停状态下翻转，效果很好，但我想我更希望卡片在点击时来回翻转……”