水平翻转卡片(保持高度为100%)
水平翻转卡片是一种常见的前端开发技术，用于实现卡片在水平方向上的翻转效果。通过CSS3的transform属性和transition属性，可以实现平滑的翻转动画效果。
水平翻转卡片的分类：
- 单面翻转：卡片只有一面内容，在翻转时显示不同的内容。
- 双面翻转：卡片有两面内容，在翻转时可以显示不同的内容。
水平翻转卡片的优势：
- 提升用户体验：通过翻转动画效果，可以吸引用户的注意力，提升网页的交互性和视觉效果。
- 增加信息展示空间：双面翻转卡片可以在有限的空间内展示更多的信息，提供更丰富的内容呈现方式。
水平翻转卡片的应用场景：
- 产品展示：可以用于展示产品的不同角度、特点和功能。
- 图片展示：可以用于展示图片的前后对比、不同效果等。
- 内容展示：可以用于展示文章的摘要、详情等。
腾讯云相关产品推荐： 腾讯云提供了丰富的云计算产品，以下是一些与水平翻转卡片开发相关的产品：
- 腾讯云云服务器（CVM）：提供稳定可靠的云服务器实例，用于部署和运行前端和后端应用。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全可靠的云端存储服务，用于存储和管理卡片所需的图片、资源文件等。 产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：提供全球加速的内容分发服务，加速卡片资源的加载和展示。 产品介绍链接：https://cloud.tencent.com/product/cdn
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
在查看源代码时，我认为他们先做一个animate {width:0%}，然后再做一个animate {width:100%}，这是在翻牌，但我的动画看起来与他们的不同：$(document).onimages.nationalgeographic.com/wpf/media-content/richmedia/0/629/project/memory/images/card_back_hard.png">问:如何让卡片水平<
浏览 9提问于2018-08-30得票数 1
回答已采纳
2回答
我有一个可变内容的可翻转卡的网格，并尝试将内容较少的卡片的height设置为与最大内容的卡片相同的值。但是，无论我将height:100%应用于哪个盒/单元，小的单元都会保持其所需的大小。我可以看到，行本身自然具有最大高度，但为什么所有子单元格都不能继承该高度？
下面是示例：
浏览 7提问于2015-12-28得票数 0
1回答
正如你在下面看到的，我想开发一个包含10张卡片的界面。随着设备大小的变化，我希望卡片的高度缩小，然后分别，卡片内部的竞赛也应该缩小(基于我可以为它们设置的约束)。所以我做了几次尝试。这导致卡片高度由卡片内的内容定义，因此当在较小的设备上查看时，卡片大小不会改变。然后我尝试了GridLayout。再一次，这导致卡片大小由内容决定，并且布局不能动态缩放。也许使用卡片不是一个好主意？我应该改用线性布
浏览 2提问于2019-12-10得票数 0
2回答
我正在使用教程创建一个翻盖卡效果使用CSS3和jQuery，我有问题，得到的高度，以调整内容的长度，而让它仍然翻转在中心水平。50px auto;.flip .card.flipped {} width: 100%; -webkit-transform-style: preserve-3d;}
.
浏览 3提问于2012-10-21得票数 6
回答已采纳
我正在尝试生成一个嵌套在垂直列表视图中的动态高度水平列表视图 body: ListView( Container(
height: 100child: Lis
浏览 15提问于2019-08-14得票数 4
我正在使用我在野外找到的一些CSS来制作翻转卡片。我做了一些调整，试图使它们具有流畅的响应能力。; perspective: 1000px; width: 100%; <p>We love that guy</p> <&#x
浏览 15提问于2020-03-03得票数 0
TextureRegion(texture, 0, 0, 20, 20);我的TextureRegion在两个参数都是true时是翻转的，而当它们是false时不是翻转的。
浏览 0提问于2016-04-06得票数 1
回答已采纳
这个想法是，用户轻敲一张卡，它会翻转，表明它是完整的。当我将对象(卡片)加载到UIScrollView中时，只有最后一张卡片会翻转。轻敲其他任何一张牌都会翻转最后一张牌。我怀疑我需要提供一个指向要翻转的对象(卡片)的指针，但不确定如何做到这一点。我试着给被点击的按钮分配一个标签，但没有成功。如何以UIScrollView中的特定对象为目标对其执行操作？cardView = [[UIView alloc] initWithFrame:CGRectMake
浏览 1提问于2012-06-30得票数 0
回答已采纳
1回答
我肯定我错过了一些简单的东西，但我无法为我的生活找到答案。
我怎样才能阻止其他卡片与它们的父元素一起扩展，并让它们保持足够的高度来显示内容？只有扩展卡才能改变高度。下面是我意思的截图：
浏览 7提问于2017-06-21得票数 8
回答已采纳
我有一个UIImage视图，我想像翻转时钟一样翻转到扁平。这是水平面的第一部分(我将在这里更改图像或添加新视图或其他东西)。我的问题是让视图在底轴上翻转。它是100px的正方形。这是我拥有的最接近的，它似乎是通过在它之前移动视图来翻转的，我不能让它翻转，但保持不动。
[UIView commitAnimat
浏览 1提问于2011-09-24得票数 1
1回答
当我试图使用引导3.2和css3转换来模拟水平翻转效果时，我遇到了一个奇怪的闪烁效果。翻转会发生，但在过渡期间，“卡片”背面的内容会迅速闪烁。我已经包括了一个JSFiddle的问题。这是发生在铬。.flippable > figure { position: absolute; height: 100%;
backface-visibility
浏览 5提问于2015-05-04得票数 1
回答已采纳
4回答
我有一个水平滚动条，只有在悬停时才会显示。但问题是，当它显示出来时，它会增加它的容器的高度，并将下列元素向下推。.you可以看到当滚动条显示时，2 div将被按下。height is unknown,the height is unknown</div><div class="two">I'm two</div>有一些规则：
包装器和一个高度不能固定，因为*oneChild *内容高度是un
浏览 5提问于2013-12-05得票数 3
1回答
我试图切换element.style.display='none';的前/后，虽然这解决了空空间问题，当它到位时，我甚至看不到瞬间翻转效果。.card__front, position: absolute; left: 0;CodePen
适当翻转效果的示例，以及不正确的页面流响应： (单击大灰色图像将其翻转)
浏览 3提问于2017-01-07得票数 0
回答已采纳
2回答
我有四张放置在网格中的卡片，我想让它们动起来。我已经成功地制作了其中一张卡片的动画，但当我尝试为其他卡片添加更多的动画javascript时，不仅这些卡片没有动画，而且之前成功制作动画的第一张卡片也不再翻转。下面是card元素的css： .card-1-inner { height: 100%; transform-styleinner&
浏览 61提问于2021-02-08得票数 0
1回答
我有一个HTML5，jQuery卡内存游戏，你可以通过一次翻转两张卡片来匹配它们。当两张卡片匹配时，我希望有一个动画播放，但是因为我已经将"transform: rotationY(180deg)"应用到翻转的卡片上，所以它会出错。rotateY在那里是为了保持旋转，这样右侧就会一直显示给球员，而比例尺就在那里隐藏牌。.scaleOut {}
这似乎不起作用，即使只
浏览 1提问于2016-04-16得票数 1
回答已采纳
现在每张卡片在卡片周围都有太多的空间。有没有什么办法可以让卡片把文字换得更紧一些？ <Card <p>{message.contents}</p>仅仅降低高度
浏览 0提问于2018-03-29得票数 2
目标：
如何在窗口垂直对齐这个div？也就是说，我希望红色区域表现得像绿色区域，但只是垂直的，而不是<em
浏览 5提问于2013-01-29得票数 0
我试着画一个被圆心垂直翻转的圆。(根据圆心翻转圆看起来是一样的，这样我就可以在视觉上进行检查了)。但是绘制的位置是完全错误的。我希望填充必须完全发生在描边区域内。
override func draw(_ dirtyRect: CGRect) {
浏览 13提问于2017-01-30得票数 0
回答已采纳
1回答
卡片中的裁剪图像
、、、
我已经建立了这个水平卡片，在左边有一个图像，我已经为卡片指定了一个最小的高度，这是很重要的。 max-width: 540px;}
width: 100%;
h
浏览 3提问于2020-05-19得票数 0
回答已采纳
我正在创建一个卡片样式的布局，在这个布局中，单个卡片垂直堆叠。在较高的屏幕宽度下，使用的卡片列越来越多--使用尽可能少的垂直空间。
我使用flex-flow: column wrap布局来实现这一点。然而，我发现容器需要有一个height或max-height，以鼓励卡片包装。考虑到卡片的数量和它们各自的大小可能会改变，如果不切断物品或在下面有过多的空间，我不知道这个高度是多少。
浏览 2提问于2015-12-03得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
