Javascript CSS3卡翻转和展开

我试图在一个容器中收集卡片/div。单击卡片/分区时，它应该水平翻转并展开，以占据容器内的整个空间（基本上，单击时将卡片/分区的大小更改为100%x 100%）。我不确定这是否可行，因为我在那里看到的所有示例通常都涉及保持相同大小的卡/分区

这是我尝试使用的小提琴，但我无法获得基本的翻转功能：

$（'.card'）。单击（函数（）{
$（this.addClass（'fliped'）.mouseleave（function（））{
$（this.removeClass（'fliped'）；
});
返回false；
});
.cards{
宽度：100%；
身高：100%；
背景：灰色；
填充：10px；
框大小：边框框；
位置：相对位置；
-webkit透视图：800；
前景：800；
}
.卡片.卡片{
-webkit变换样式：保留-3d；
-webkit转换：0.5s；
}
.翻转.卡片.脸{
宽度：100%；
位置：绝对位置；
-webkit背面可见性：隐藏；
z指数：2；
}
.翻转.卡片.正面{
位置：绝对位置；
z指数：1；
背景：黑色；
}
.翻转.卡片.背面{
-webkit变换：rotatex（-180度）；
背景：白色；
}
.卡片.卡片.翻转{
-webkit变换：rotatex（-180度）；
}
.卡片{
宽度：100%；
背景：浅灰色；
填充：6px；
利润率：10px0；
框大小：边框框；
光标：指针；
位置：相对位置；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
.卡片：第n种类型（1）{
边际上限：0；
}
.卡片数字{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
背面可见性：隐藏；
}

卡1正面
卡2背面
卡2正面
卡2背面
卡3正面
卡3背面
只需添加
！重要信息
新“翻转”类属性将覆盖旧属性。javascript行
$（“.item”）.not（this）.addClass（'off'）
在选择一张卡时删除其他卡。
绝对
位置让一切都就位。活动卡具有更高的z索引，以确保其他卡不会激活“mouseleave”触发器更新：最终在Mozilla和Chrome上100%运行。ps：单击打开卡，再次单击关闭卡


$（'.item'）。单击（函数（）{
if（！$（this.hasClass（“翻转”））{
$（“.item”）.not（this.addClass（'off'）；
$（this.addClass（'flipped'）；
}否则{
$（“.item”）.removeClass（'off'）；
$（this.removeClass（'fliped'）；
}
});
.off{
颜色：rgba（0,0,0,0.0）！重要；
背景：rgba（230230250，0.0）！重要；
}
.卡片{
宽度：100%；
身高：100%；
背景：薰衣草；
位置：相对位置；
-webkit透视图：900px；
透视图：900px；
}
.翻了{
排名：0%！重要；
身高：100%！重要；
宽度：100%！重要；
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
-webkit转换：所有1；/*Safari*/
过渡：所有1；
颜色：rgba（0,0,0,0.0）；
z指数：100；
-webkit变换样式：保留-3d；
背景：番茄；
}
.翻转：之后{
内容：“这里有更多的文字。”；
右：0px；
底部：0px；
位置：绝对位置；
顶部：0px；
左：0px；
颜色：rgba（0,0,0,1.0）；
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
-webkit背面可见性：隐藏；
-webkit变换样式：保留-3d；
背景：金；
}
.卡片{
身高：22%；
宽度：100%；
框大小：边框框；
光标：指针；
-webkit转换：所有1；/*Safari*/
过渡：所有1；
显示：块；
位置：绝对位置；
背景：番茄；
}
.aaa{
最高：0%；
}
.bbb{
最高：26%；
}
.ccc{
最高：52%；
}
.ddd{
最高：78%；
}

这里有一些文字。
这里有一些文字。
这里有一些文字。
这里有一些文字。
只需添加
！重要信息
新“翻转”类属性将覆盖旧属性。javascript行
$（“.item”）.not（this）.addClass（'off'）
在选择一张卡时删除其他卡。
绝对
位置让一切都就位。活动卡具有更高的z索引，以确保其他卡不会激活“mouseleave”触发器更新：最终在Mozilla和Chrome上100%运行。ps：单击打开卡，再次单击关闭卡


$（'.item'）。单击（函数（）{
if（！$（this.hasClass（“翻转”））{
$（“.item”）.not（this.addClass（'off'）；
$（this.addClass（'flipped'）；
}否则{
$（“.item”）.removeClass（'off'）；
$（this.removeClass（'fliped'）；
}
});
.off{
颜色：rgba（0,0,0,0.0）！重要；
背景：rgba（230230250，0.0）！重要；
}
.卡片{
宽度：100%；
身高：100%；
背景：薰衣草；
位置：相对位置；
-webkit透视图：900px；
透视图：900px；
}
.翻了{
排名：0%！重要；
身高：100%！重要；
宽度：100%！重要；
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
-webkit转换：所有1；/*Safari*/
过渡：所有1；
颜色：rgba（0,0,0,0.0）；
z指数：100；
-webkit变换样式：保留-3d；
背景：番茄；
}
.翻转：之后{
内容：“这里有更多的文字。”；
右：0px；
底部：0px；
位置：绝对位置；
顶部：0px；
左：0px；
颜色：rgba（0,0,0,1.0）；
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
-webkit背面可见性：隐藏；
-webkit变换样式：保留-3d；
背景：金；
}
.卡片{
身高：22%；
宽度：100%；
框大小：边框框；
光标：指针；
-webkit转换：所有1；/*Safari*/
过渡：所有1；
显示：块；
位置：绝对位置；
背景：番茄；
}
.aaa{
最高：0%；
}
.bbb{
最高：26%；
}
.ccc{
最高：52%；