Javascript 如何将此翻转卡更改为垂直翻转？

我希望它不是从右到左，然后从左到右，而是从下到上，从背面，从上到下。我该怎么做？我尝试了一些解决方案，持续了几个小时，所以我写信给你：/

$document.readyfunction{ $'.flipWrapper'。单击函数{ $this.find'.card'.toggleClass'flipped'； 返回false； }; }; .flipWrapper{ -webkit透视图：1000； 宽度：400px； 高度：200px； 位置：相对位置； 保证金：50px自动； } .flipWrapper.card.flipped{ -webkit变换：旋转180度； } .flipWrapper.card{ 宽度：100%； 身高：100%； -webkit变换样式：保留-3d； -webkit转换：0.5s； } .flipWrapper.card.face{ 宽度：100%； 身高：100%； 位置：绝对位置； -webkit背面可见性：隐藏； z指数：2； 字体系列：格鲁吉亚； 字号：3em； 文本对齐：居中； 线高：200px； } .flipWrapper.卡片.正面{ 位置：绝对位置； z指数：1； 背景：rgb57、171、62； 颜色：白色； 光标：指针； 边界半径：10px； } .flipWrapper.卡片.背面{ -webkit变换：旋转-180度； 背景：蓝色； 背景：红色； 颜色：白色； 光标：指针； 边界半径：10px； } jQuery 剧本

---

您需要将CSS3 transform属性与rotatex一起使用，而不是rotatey

只需从-webkit transform:rotatey-180deg；到-webkit变换：rotatex-180deg；。我想这就是你要找的

$document.readyfunction{ $'.flipWrapper'。单击函数{ $this.find'.card'.toggleClass'flipped'； 返回false； }; }; .flipWrapper{ -webkit透视图：1000； 宽度：400px； 高度：200px； 位置：相对位置； 保证金：50px自动； } .flipWrapper.card.flipped{ -webkit变换：旋转180度； } .flipWrapper.card{ 宽度：100%； 身高：100%； -webkit变换样式：保留-3d； -webkit转换：0.5s； } .flipWrapper.card.face{ 宽度：100%； 身高：100%； 位置：绝对位置； -webkit背面可见性：隐藏； z指数：2； 字体系列：格鲁吉亚； 字号：3em； 文本对齐：居中； 线高：200px； } .flipWrapper.卡片.正面{ 位置：绝对位置； z指数：1； 背景：rgb57、171、62； 颜色：白色； 光标：指针； 边界半径：10px； } .flipWrapper.卡片.背面{ -webkit变换：rotatex-180度； 背景：蓝色； 背景：红色； 颜色：白色； 光标：指针； 边界半径：10px； } jQuery 剧本