我正在使用boostrap,而我正在制作一张翻转动画卡(col-lg-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
我做错了什么?
答案 0 :(得分:0)
如果你的意思是当你调整屏幕大小时,翻转卡留在左边而其他人留在中心,如果你想让翻转卡像其他人一样保持在中心,你必须添加margin: auto
as遵循:
.flip .card {
/* New property added */
margin: auto
}
检查更新后的CodePen,希望这是你想要的。