CSS only -有多个div的卡片翻转循环动画？

文章/答案/技术大牛

发布

1回答

css

我想做翻转效果与多个div，css只。每次卡片翻转时，显示下一个div。(不管有多少div。) 我试过了，但我就是想不出div之间的时间。1100 .card { width: 200px; transform-style: preserve-3d; div

浏览 53提问于2021-07-22得票数 1

回答已采纳

1回答

用于翻转切换事件的Jquery Flipcard动画

javascript、jquery

我有一个简单的jquery动画卡动画- 现在这个翻转卡片的工作方式是，它显示顶部的div，并隐藏它下面的所有div。如果你点击第一个div中的一个链接，它会翻转到第二个div andsoforth.When，当点击锚点标签时，它会再次翻转到第一个div。现在我想在前面的翻转卡片</e

浏览 3提问于2012-06-29得票数 0

回答已采纳

1回答

尝试使用css3和jQuery设置/翻转一副纸牌的动画

jquery、css、css-transitions

我已经使用javascript/html/css创建了一副牌-我正在使用css动画来发牌，翻转它们，等等。这是网站 (请查看chrome，因为我只使用webkit前缀) 如果你点击“发牌”按钮，它会将卡片发到两个不同的部分-一个是给(计算机玩家)的，另一个是给个人玩家的)当动画交易完成时，我正在尝试翻转玩家的卡片部分，以显示实际的卡片，而不是卡片</em

浏览 0提问于2012-12-08得票数 0

回答已采纳

1回答

前部和后部翻转效果

jquery、css、rotation、css-animations、flip

我想要创造一个翻转效果，在鼠标上触发，然后在鼠标出来时翻转回前面板。因此，必须有一个正面和背面的卡片，应该翻转: HTML： <div class="front"> Front-Content </div> <div class="back"> Back-Content </

浏览 1提问于2014-09-25得票数 2

回答已采纳

4回答

卡片在点击时翻转，仅使用关闭框关闭

javascript、jquery、css、flip

我已经设置了一个卡片翻转动画。点击一下，卡片就会翻过来。卡片的“背面”有一个“关闭框”。我希望只有当你点击背面的关闭框时，卡片才会翻转回来。目前，我使用jquery在div中添加了一个类，这会“翻转”卡片。编辑:我忘了提到，这个页面上有多个.card实例，这就是为什么我使用$this而不是直接引用.card的原因，因为它显然会一次翻

浏览 35提问于2018-08-06得票数 3

回答已采纳

1回答

单次CSS3变换后的双CSS3变换

jquery、html、css、animation

我有一个HTML5，jQuery卡内存游戏，你可以通过一次翻转两张卡片来匹配它们。当两张卡片匹配时，我希望有一个动画播放，但是因为我已经将"transform: rotationY(180deg)"应用到翻转的卡片上，所以它会出错。卡片HTML <figure class=

浏览 1提问于2016-04-16得票数 1

回答已采纳

2回答

多张卡片的翻转动画

javascript、css、animation

我有四张放置在网格中的卡片，我想让它们动起来。我已经成功地制作了其中一张卡片的动画，但当我尝试为其他卡片添加更多的动画javascript时，不仅这些卡片没有动画，而且之前成功制作动画的第一张卡片也不再翻转。下面是card元素的css： .card-1-inner { heig

浏览 61提问于2021-02-08得票数 0

1回答

包含JQuery的容器的容器结构问题

javascript、jquery、html、css、structure

我正在为学校完成一个记忆游戏，我真的很想用CSS动画翻转卡片，这本身是相当直接的。然而，我对JavaScript和JQuery非常陌生，这会给实现适当的容器结构带来一些麻烦，我需要在点击卡片时使它们翻转。"front"></div> <div class="back"><img src="cards"&g

浏览 0提问于2017-11-19得票数 0

回答已采纳

1回答

如何根据屏幕宽度定义变量？

javascript、css、media-queries

我正在使用TweenMax基于滚动位置进行动画。我想要设置动画的位置会根据屏幕尺寸的不同而变化。可以根据屏幕的宽度进行变量更改吗？我是个新手，使用了很多复制/粘贴解决方案。我有两个相邻的矩形div，它们像卡片一样翻转，在背面显示信息。在移动屏幕上查看时，这些卡片是垂直堆叠的，而不是彼此并排。这会改变我想要动画翻转卡片

浏览 33提问于2019-01-05得票数 0

回答已采纳

4回答

如何添加一个简单的卡翻转动画？

javascript、jquery、css、css-transitions、css-transforms

我在创造一个孤独的游戏。到目前为止，我的大部分工作，但卡翻转动画是一个痛苦的a**。当你拖放一张卡片时，卡片的背面会被一个正面所取代。现在，当这个动作发生时，我想添加一个漂亮的翻转动画。.red, .

浏览 0提问于2014-06-14得票数 4

回答已采纳

1回答

Css转换翻转和IE问题

html、css

我试图做一个css卡翻转效果，并在这里有一些问题。第一，我似乎无法得到javascript，使卡翻转，以恢复翻转。我有一个呼吁，点击任何一面，并由于某种原因，它不是射击的背面的卡片。其次，我似乎无法让这个动画在ie10-11中工作。这张卡简单地朝一个方向翻转，然后消失。我尝试了几种技巧，但似乎没能找到答案。这是我正在做的工作- 最后，当我把内容放在卡片上时，它移动时似乎会闪烁，如

浏览 1提问于2014-10-23得票数 0

回答已采纳

1回答

无法正确完成翻转三维动画

jquery、css、animation

我正在尝试用jQuery制作一个翻转3D动画，但是我无法正确地翻转卡片的内容。CSS background-color: #f0d6a3;}</div></div>$('.flip-conta

浏览 1提问于2014-05-14得票数 0

回答已采纳

1回答

CSS卡片翻转动画

javascript、html、css、animation

我正在尝试构建一个动画，每次点击一张卡片，卡片就会翻转，显示出相反的一面。每次翻转卡片时，卡片每一面的文字都会发生变化。我遇到的问题是，我的卡的正面只在零星的场合下才能看到。我找不到任何逻辑来解释为什么正面通常是不可见的，但偶尔会是可见的。这是我的jsfiddle：<body> <section&

浏览 2提问于2018-10-24得票数 1

1回答

为什么这个rotate3d() CSS转换在Internet Explorer10中不能正常工作？

internet-explorer、css、css-transitions、css-transforms

我正在尝试使用CSS变换和过渡来创建“翻牌”效果。我使用一个<div>来表示卡片，并使用两个子<div>来表示卡片的正面和背面。两个面绝对位于彼此的顶部，后者具有180度变换以使其向后旋转。我创建了一个jsFiddle来说明我当前的方法：这个效果在Chrome和Firefox (最新版本)中可以正常工作。然而，在IE10中，卡片似乎在两个轴上翻转，并且卡片的</e

浏览 4提问于2013-05-23得票数 2

回答已采纳

1回答

带有CSS转换的Firefox中奇怪的像素移位/跳跃

javascript、jquery、html、css

问题是：同样，在Chrome或中也不会发生这种情况。有人能解释是什么原因造成的或提供补救办法吗？', '-webkit

浏览 1提问于2014-07-20得票数 9

回答已采纳

1回答

CSS背面-在父div中没有显示在纸上的可见性。

css

我正在尝试制作一个带有CSS转换的开本动画，类似于卡片翻转动画，除了后面的另一张卡。<div class="scene"> <div cla

浏览 0提问于2014-11-14得票数 0

回答已采纳

2回答

如何在动画运行时临时禁用JQuery单击处理程序？

jquery、html、event-handling、click、onclicklistener

我仍然是JQuery的新手，我对如何解决下面的问题感到困惑。我想暂时禁用两个翻转功能(响应单击事件)，直到淡入淡出动画结束。有了下面的内容，当动画播放的时候，函数仍然在运行，所以两个div(卡片背面和卡片内容)同时显示。setTimeout(function(){ },2000);

浏览 2提问于2013-07-01得票数 2

回答已采纳

2回答

CSS卡翻转故障(填充？)保证金？)

html、css、css-animations、card-flip

我添加了一个整洁的card翻转动画来翻转日历日期，并在卡片背面显示更多信息。这里有一个CodePen和HTML来说明这个问题。我不知道CSS代码的哪个部分导致了问题。<div class="col-lg-2 col-md

浏览 11提问于2014-10-27得票数 3

回答已采纳

2回答

角卡回滚而不调用函数

angular、typescript

我使用角作为我的前端，并想使用卡翻转动画在卡片上。单击卡片时，卡片应翻转并显示表单。在此表单上单击submit时，该表单应向后翻转。我还在表单中添加了一个清晰的按钮，它应该清除表单，而不是翻转卡片回来。由于某些原因，在我的实现中，单击clear是在翻转表单。/card.component.css'], animations

浏览 2提问于2021-10-26得票数 0

1回答

CSS 3卡-第一个动画的chrome 19-21中的翻转动画错误

google-chrome、css、css-transitions

我遇到了一个非常奇怪的问题。我为我的作品集做了一个css 3卡片翻转动画。在火狐中，一切正常，但在chrome中，出于某种原因，第一张卡的动画方向错误。正如你所看到的，左边的图片显示了错误的动画，拉伸错误，而右边的图片是完美的。所有的卡片都是由脚本创建的，所以在html标记或css方面不能有区别。有<

浏览 2提问于2012-08-31得票数 0

回答已采纳

点击加载更多