html - 仅在移动设备/小屏幕上显示翻转卡片的背面

Question

我在使用 :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>

Answer 1

您可以为移动设备添加媒体 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>