如何制作卡片答卷
提问于 2017-11-20 23:09:51
我使用的是引导，我在一行(Col 12)中制作了一个翻转动画卡，问题是当我调整屏幕大小时，卡没有表现出“响应”。
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
margin: 0px !important;
}<div id="porosity" class="card">
<div class="face front">
<div class="inner">
<img src="http://placehold.it/100x100" class="img-responsive center-block" alt="">
<p>Porosity</p>
</div>
</div>
<div class="face back">
<div class="inner text-center">
<p>Permeable to fluids, permeable to outside influences.</p>
</div>
</div>
</div>
完整代码：https://codepen.io/elunap/pen/rYJEVW
我做错什么了？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-20 23:21:41
如果您的意思是，当您调整屏幕大小时，翻转卡停留在左边，而其他卡停留在中间，如果您想让翻转卡与其他卡一样保持在中间，则必须添加如下margin: auto：
.flip .card {
/* New property added */
margin: auto
}检查更新的CodePen，希望这是您想要的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47407197
复制
腾讯云开发者
