Flip Card CSS强制我在px中添加高度
Flip Card CSS是一种用于创建翻转卡片效果的CSS技术。它可以通过CSS的transform属性和过渡效果来实现卡片的翻转动画。
在Flip Card CSS中，如果要强制在px中添加高度，可以使用CSS的height属性来设置卡片的高度。height属性用于定义元素的高度，可以接受像素值（px）、百分比（%）或其他长度单位作为参数。
例如，如果要将卡片的高度设置为200px，可以使用以下CSS代码：
.card { height: 200px; }
这样就可以将卡片的高度固定为200像素。
Flip Card CSS可以应用于各种场景，例如创建产品展示、图片展示、卡片翻转等效果。通过翻转卡片，可以给用户带来更加生动和交互性的体验。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发者快速搭建和部署云计算环境，提供稳定可靠的基础设施支持。
更多关于腾讯云产品的介绍和详细信息，可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
2回答
AngularJS动画卡翻转
javascript、css、angularjs、ng-animate
我正在尝试使用新的AngularJS方式在页面过渡之间制作动画，并希望加入卡片翻转(如)
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-
浏览 1提问于2014-02-07得票数 14
2回答
具有自动高度的CSS3倒装卡
jquery、css、height
我正在使用教程创建一个翻盖卡效果使用CSS3和jQuery，我有问题，得到的高度，以调整内容的长度，而让它仍然翻转在中心水平。
代码：
<div class="flip">
<div class="card">
<div class="face front">
Front<br> Other text.<br> Other text.<br> Other text.<br> Other text.
浏览 3提问于2012-10-21得票数 6
回答已采纳
2回答
绘制渐变后CSS文本不会立即显示
html、css
我有个奇怪的问题。这只发生在最初的卡片翻转。
我的文字显示在渐变背景之上。此背景图像显示在鼠标悬停上。
文本需要一秒的时间才能显示出来，然后就会突然出现。我需要文本已经在那里，当图像被翻转，或至少有一个平稳的过渡，如果这是不可能的。我把它追溯到文字在图像的不同角落的位置。如果我删除用于放置文本的css，那么它将显示并正常工作。
这是Html
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front"&
浏览 4提问于2020-04-14得票数 0
回答已采纳
2回答
翻转卡效应失效
jquery、html、css
我使用以下代码绑定以使用“卡片翻转”类型效果：
CSS
.flip {
-webkit-perspective:800;
width:278px;
height:400px;
position:relative; }
.flip .card.flipped { -webkit-transform:rotatey(-180deg); }
.flip .card {
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transition:0.
浏览 3提问于2015-03-21得票数 0
回答已采纳
1回答
如何使用css/jquery向图像添加缩放和翻转
javascript、jquery、html、css
我试图同时添加翻转和缩放效果，但我只能达到一个效果。
用例是当我点击图像时，图像会缩放，现在我需要在鼠标保存图像之前添加翻转效果。
有人能用我的代码帮我完成输出吗？
这就是我尝试过的：
<div class="flip">
<div class = 'card'>
<img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
浏览 2提问于2013-11-14得票数 0
1回答
如何将文件上传按钮链接到翻转卡
html、css
我目前在index.html中，我添加了翻盖卡作为我的代码的个人资料照片，我还包括了一个文件上传按钮，但我不知道如何将文件上传按钮代码链接到翻转卡，这样一旦您选择了一个图像，它将自动显示到翻转卡，我也添加了CSS到翻转卡，但没有CSS文件上传按钮。
我使用过的翻盖卡的网站：
网站我已经使用文件上传按钮：。
//index.html
<--倒装卡-> `‘
<head>
<meta name="viewport" content="width=device-width, initial-scale=1
浏览 1提问于2020-08-02得票数 0
回答已采纳
1回答
嵌套的翻转卡片和Apple Safari
html、css、ios、safari
我正在尝试为登录系统制作嵌套的翻转卡片--就Edge、Chrome、Opera和Firefox而言是成功的，但Safari……
我知道Apple Safari支持旋转卡片的"hack“，所以我对所有的卡片应用了'-webkit-backface-visibility: hidden;‘。
不幸的是，Safari仍然显示my Cards的旋转背面。有人能帮上忙吗？
下面是我的代码：
CSS
/* The OUTER & INNER flip */
.flip-o-card, .flip-i-card {
background-color: transparent;
浏览 1提问于2021-03-14得票数 0
2回答
我想做一个记忆游戏。创建卡片的最佳方法是什么？
javascript、html、css、css-animations
所以基本上我想用JS，HTML和CSS做一个记忆游戏。我想要能够点击卡片，然后应该翻转动画翻转。我不想创建20个按钮。有没有更好的方法来创建带有CSS动画的卡片。我差不多知道怎么做动画了。 .flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This c
浏览 22提问于2020-03-24得票数 0
回答已采纳
我想做翻转效果与多个div，css只。 每次卡片翻转时，显示下一个div。(不管有多少div。) 我试过了，但我就是想不出div之间的时间。 https://codepen.io/impetusjj/pen/JjNyodo?editors=1100 .card {
position: relative;
width: 200px;
height: 300px;
transform-style: preserve-3d;
div {
position: absolute;
width: 100%;
height: 100%;
backfac
浏览 53提问于2021-07-22得票数 1
回答已采纳
1回答
我正在使用我在野外找到的一些CSS来制作翻转卡片。我做了一些调整，试图使它们具有流畅的响应能力。我的尝试如下：
css：
.flip-card-wrapper {
width: 50%;
height: auto;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-card img {
width: 100%;
height: auto;
}
.flip-ca
浏览 15提问于2020-03-03得票数 0
3回答
Z-索引和CSS旋转
html、css、css-transitions
我用CSS、HTML和CSS转换制作了一些翻盖卡
当你悬停在卡片上时，它会翻转和放大。我如何定位当前卡的悬停，使它放在顶部使用z索引与位置相对，因为它有一个问题使用css transform:rotate。
所以我需要那张挂在上面的卡。
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (rem
浏览 1提问于2019-08-19得票数 1
回答已采纳
1回答
HTML/CSS翻转卡可在台式机上使用，但不能在移动设备上使用
html、css、hover、css-animations
我正在帮助一个朋友做一个基本的html/css站点，我们在设置翻转卡片效果时遇到了问题。 你可以在这里看到：https://www.fragranceadvisorjobs.com/当鼠标悬停在上面时，中间部分的那些瓷砖会翻转，并显示有关该品牌的信息。它在桌面和Chrome的响应式查看器上似乎工作得很好。 然而，当我在我的移动设备(ios)上访问该网站时，它会产生翻转效果，但不会显示卡片背面的内容。 .flip-card {
background-color: transparent;
width: 32%;
display: inline-block;
height:
浏览 13提问于2020-07-18得票数 1
回答已采纳
1回答
引导网格对齐不起作用
css、twitter-bootstrap
我有一套三张“卡片”(但不使用引导卡类)，我需要在页面上水平对齐和居中。我将外部div设置为全宽度，并试图将三个.info-card类中的每个类都设置为相等的.col-lg-4宽度。这仍然保持卡向左浮动(从.flip-card类中移除左浮点数将卡片垂直对齐)。如何在这里正确应用这些列？
<div class="container">
<div class="flip-cards col-lg-12">
<div class="info-card col-lg-4">
<div
浏览 0提问于2016-05-23得票数 0
1回答
如何在角度ngRepeat内翻转卡
javascript、css、angularjs
我使用ngRepeat在容器中显示了一系列“卡片”，如下
<div class="flip-container">
<div style="display:inline-block" ng-repeat="c in vm.car">
<my-car-card car='c'></my-car-card>
</div>
其中<my-car-card>是一个自定义指令。添加到前面的一个例子中，我想尝试在某些事件上翻转这些卡片(这里只需按一下按钮)。我一直在
浏览 4提问于2015-12-30得票数 1
1回答
在div中不能单击标记
html、css、sass
我正在尝试实现一张翻转卡片，并在卡片的背面放置两个标签。首先，div.sm中的标签是不可点击的，其次是可以正常工作的。下面是JSX和CSS/SCSS。 当我将transform: translate(-50%，-50%)添加到sm类时，也会发生这种情况。谢谢你的帮助 .flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.col-1 {
margin-left: -30px;
width: 200px;
浏览 15提问于2020-06-26得票数 1
2回答
我有一个小提琴我按照这里的指示和当我翻转卡片，只有正面显示(翻转)。我好像看不出背后的表情。我读过类似的关于堆叠溢出的问题，说后背必须先旋转。在我的例子中，它确实是最初旋转的。
HTML
<ul>
<li>
<div class="container">
<div class="card">
<div class="front">
front
</div>
浏览 4提问于2013-10-09得票数 4
回答已采纳
1回答
用javascript对象属性填充DOM元素模板
javascript、html、jquery
我是一个全新的成员，但不是一个新的用户。我到处都找过答案，但没有运气。我的问题是：
我正在用制作学校的在线闪存卡。我制作了一张模板卡，并使用CSS (细节未显示)进行样式设计，然后将其放在一个柔性盒容器中。然后，我有一个单独的JS文件，其中定义闪存卡的详细信息如下：
var card1 = {
type: "military"
name: "F22",
engine: "turbofan",
wingspan: "44",
speed: "1500"
};
var card2 = {
浏览 1提问于2021-02-22得票数 0
回答已采纳
2回答
CSS翻转卡片在转换完成之前不会显示背面相对子元素
html、css、css-transforms
以这里的翻转卡片为例：
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-c
浏览 2提问于2019-12-11得票数 1
5回答
翻转所有的牌，但想一个一个地翻转
javascript、html、jquery、css
我正试着一个一个地翻转这些卡片，但它们是一起翻转的。
我相信我在javaScript上遗漏了一些东西。
在最初的代码中，我使用的是前面的图像和后面的无序列表，我试图在这里继续只写“前沿”和“后退”。
$(".flip").click(function() {
$(".card").toggleClass("flipped");
});
.card-container {
display: flex;
}
.card {
width: 300px;
height: 6rem;
margin: 30px;
transfor
浏览 3提问于2021-03-03得票数 2
回答已采纳
1回答
firefox中的3D转换问题
css、firefox、webkit-perspective
我有一个显示翻转卡的，它可以像我预期的那样在铬中工作，但是火狐的深度透视图是平的，我不知道问题出在哪里。
我试着补充：
transform-style: preserve-3d;
和
perspective: 1000;
对于所有的班级(像卡片)，我都没有运气。
HTML结构是：
<div id="card-container">
<button id="card-flip">Flip the card</button>
<div id="card">
<div
浏览 0提问于2014-11-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
