html - 使所有列翻转并在后面显示文本
问题描述
我不能让所有的列都翻转并在背面得到一个段落,我很感激任何帮助。
这是我的代码: https ://codepen.io/nizar-bamida/pen/GLgEWO
section {
width: 980px;
margin: 0 auto;
}
.flip-card {
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="col-md-2 flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
<!--storage---->
<p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
</div>
<div class="flip-card-back">
<p>jjjj</p>
</div>
</div>
</div>
<div class="col-md-2">
<div class="flip-card-inner">
<div class="flip-card-front">
<!--long dist---->
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
<p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
</div>
<div class="flip-card-back">
<p>qss</p>
</div>
</div>
</div>
<div class="col-md-2">
<!--comercial ---->
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
<p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
</div>
<div class="col-md-2">
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
<!--storage---->
<p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
</div>
<div class="col-md-2 flip-card">
<!--packing---->
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
<p class="text-center">We identify our cities like a local resident. With over 20 years relocation experience, we've dealt first hand with any and everything your city can hand out. We've grown from experience with each move.</p>
</div>
</div>
</div>
</section>
解决方案
你很接近 - 请注意,正面和背面都显示在前面- 你可以添加transform: rotateY(180deg)
到你flip-card-back
的解决这个问题 - 请参见下面的简化演示:
section {
width: 980px;
margin: 0 auto;
}
.flip-card {
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-back {
transform: rotateY(180deg); /* added */
margin-top: 75px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="col-md-2 flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://web.archive.org/web/20190206193548im_/https://www.centurymovingservices.com/wp-content/uploads/2014/12/local_icon1.png">
</div>
<div class="flip-card-back">
Some text here
</div>
</div>
</div>
</div>
</div>
</section>
推荐阅读
- c# - 在 ASP.NET Core 2.1 Web 客户端中存储不记名令牌的位置
- excel - 仅计算唯一日期
- node.js - 如何有1个窗口而不是多个windowsss,nodejs
- python - Networkx - 如何更改边缘 ID?
- ios - 删除号码电话联系人 - Swift 3 - 4
- python - Django Rest Framework 模型对象返回带有选项的字段的存储值
- javascript - 在 graphql 的解析器中获取用户代理访问权限
- android - 是否可以为单个类提供多个委托类型?
- javascript - 使用一些 JS 框架的可重用组件或小部件
- codenameone - TextArea 不允许根据需要输入文本