我在使用 :hover
选择器的网页上有几张翻转卡片,并且在浏览器中按预期工作;但是,正如预期的那样,它不适用于移动设备。
我希望在移动设备上只显示卡片的背面 flip-card-back
。我希望用纯 CSS 来做到这一点。感谢您的帮助。
/* The flip card container */
.flip-card {
background-color: transparent;
width: 255px;
height: 255px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
/* 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 a 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;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #CDC8CB;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: #7DA1C4;
color: white;
transform: rotateY(180deg);
}
/* Float columns side by side */
.column-card {
float: left;
width: 25%;
padding: 0 25px;
}
/* Remove extra left and right margins, due to padding in columns */
.row-card {margin: 0 -5px;}
/* Clear floats after the columns */
.row-card:after {
content: "";
display: table;
clear: both;
}
/* Align text in list */
ul {
list-style-position: outside;
}
/* one column layout on small screens */
@media screen and (max-width: 1200px) {
.column-card {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
<!-- first row -->
<div class="row-card">
<!-- Frist card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 1</p>
</div>
<div class="flip-card-back">
<h1>Card 1</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Second Card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 2</p>
</div>
<div class="flip-card-back">
<h1>Card 2</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Third Card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 3</p>
</div>
<div class="flip-card-back">
<h1>Card 3</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
</div>
最佳答案
您可以为移动设备添加媒体 767px 并使用此 css,它会在没有悬停的情况下翻转卡片
@media screen and (max-width: 767px) {
.flip-card .flip-card-inner {
transform: rotateY(180deg);
}
}
/* The flip card container */
.flip-card {
background-color: transparent;
width: 255px;
height: 255px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
/* 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 a 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;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #CDC8CB;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: #7DA1C4;
color: white;
transform: rotateY(180deg);
}
/* Float columns side by side */
.column-card {
float: left;
width: 25%;
padding: 0 25px;
}
/* Remove extra left and right margins, due to padding in columns */
.row-card {margin: 0 -5px;}
/* Clear floats after the columns */
.row-card:after {
content: "";
display: table;
clear: both;
}
/* Align text in list */
ul {
list-style-position: outside;
}
/* one column layout on small screens */
@media screen and (max-width: 1200px) {
.column-card {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
@media screen and (max-width: 767px) {
.flip-card .flip-card-inner {
transform: rotateY(180deg);
}
}
<!-- first row -->
<div class="row-card">
<!-- Frist card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 1</p>
</div>
<div class="flip-card-back">
<h1>Card 1</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Second Card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 2</p>
</div>
<div class="flip-card-back">
<h1>Card 2</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Third Card -->
<div class="column-card">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Card 3</p>
</div>
<div class="flip-card-back">
<h1>Card 3</h1>
<ul>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
<li style="font-size:14px; text-align: left;">something</li>
</ul>
</div>
</div>
</div>
</div>
</div>
关于html - 仅在移动设备/小屏幕上显示翻转卡片的背面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58811531/