CSS flip card - 如何让正面比背面小

Question

我有一张翻盖卡片，是我使用 CSS 制作的。它翻转得很好，但我想让卡片的正面比背面小。我试过调整高度，但我运行遇到溢出等问题。我尝试 Google 这个但只找到一个网站；他们没有完全满足我的需要。

所以我的问题是如何使正面比背面短，背面具有一致的背景颜色和溢出，充分显示并且不离开背景。

这是一个很棒的网站，可以满足我的需求： https://businessexpress.maryland.gov/

请务必查看上面那个网站。它确实表明了我的意思。我看了他们的代码，但我不知道该怎么做。

我这里有一个 fiddle，我的代码是： https://jsfiddle.net/1ehtw5L4/

这是我的 HTML:

<div class="flip-cards">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2 class="front-title">Prepare Your Business</h2>
    </div>
    <div class="flip-card-back">
      <h2>Content</h2>
    </div>
  </div>
</div>

这是我的 CSS:

.flip-card {
  background-color: transparent;
  width: 19%;
  /* change the below */
  height: 400px;
  margin: auto;
  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%;
  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, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #008CCC;
  color: white;
  text-align: center;
  height: 100%;
}

.flip-card-back {
  background-color: #E7E7E7;
  color: black;
  transform: rotateY(180deg);
  /* change the below */
  height: 400px;
}

.flip-card-back ul {
  padding-left:1em;
  padding-right:1em;
  list-style-type:none;
}

.flip-card-back li {
  border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
  border-bottom: none;
}

.flip-card-back h2 {
  text-align:center;
  background-color:black;
  color:white;
  padding-top:0.6em;
  padding-bottom:0.6em;
}

.flip-card-back h2 a, .flip-card-back h2 a:visited {
  color:white;
}

.flip-card-back a {
  display:block;
}

.front-title {
  padding-top:0.6em;
  padding-bottom:0.6em;
}

.flip-cards {
  display:flex;
}

.sbr-intro {
  margin-bottom:1em;
}

Answer 1

只需将 height: auto; 添加到 .flip-card-front。

我还添加了 pointer-events: none; 到 .flip-card 并添加了 pointer-events: auto; 到 .flip-card-front, .flip-card-back 以解决悬停问题。

.flip-card {
  background-color: transparent;
  width: 19%;
  /* change the below */
  height: 400px;
  margin: auto;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  pointer-events: none;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  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,
.flip-card:active .flip-card-inner,
.flip-card:focus .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  pointer-events: auto;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #008CCC;
  color: white;
  text-align: center;
  height: auto;
}

.flip-card-back {
  background-color: #E7E7E7;
  color: black;
  transform: rotateY(180deg);
  /* change the below */
  height: 400px;
}

.flip-card-back ul {
  padding-left: 1em;
  padding-right: 1em;
  list-style-type: none;
}

.flip-card-back li {
  border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
  border-bottom: none;
}

.flip-card-back h2 {
  text-align: center;
  background-color: black;
  color: white;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-card-back h2 a,
.flip-card-back h2 a:visited {
  color: white;
}

.flip-card-back a {
  display: block;
}

.front-title {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-cards {
  display: flex;
}

.sbr-intro {
  margin-bottom: 1em;
}

<div class="flip-cards">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h2 class="front-title">Prepare Your Business</h2>
      </div>
      <div class="flip-card-back">
        <h2>Content</h2>
      </div>
    </div>
  </div>
</div>

Answer 2

如果你想要不同的行为，你也需要在翻转后设置宽度和高度。

我向以下选择器添加了属性：

.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner

尝试以下方法CSS：

.flip-card {
    background-color: transparent;
    width: 19%;
    /* change the below */
    height: 120px;
    margin: auto;
    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%;
    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, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
  width: 100%;
    height: 100%;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #008CCC;
    color: white;
    text-align: center;
    height: 100%;
}

.flip-card-back {
    background-color: #E7E7E7;
    color: black;
    transform: rotateY(180deg);
    /* change the below */
    height: 400px;
}

.flip-card-back ul {
    padding-left:1em;
    padding-right:1em;
    list-style-type:none;
}

.flip-card-back li {
    border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
    border-bottom: none;
}

.flip-card-back h2 {
    text-align:center;
    background-color:black;
    color:white;
    padding-top:0.6em;
    padding-bottom:0.6em;
}

.flip-card-back h2 a, .flip-card-back h2 a:visited {
    color:white;
}

.flip-card-back a {
    display:block;
}

.front-title {
    padding-top:0.6em;
    padding-bottom:0.6em;
}

.flip-cards {
    display:flex;
}

.sbr-intro {
    margin-bottom:1em;
}

CSS flip card - 如何让正面比背面小

CSS flip card - how do I make the front smaller than the back

css

overflow

flip